usehook - 前端码易

code deep_

所有专栏

专业面试辅导

创建时间: 2025-12-03最后更新: 2025-12-22作者: yangbo(96862973d)

1、概述

feConvolveMatrix 是 SVG 滤镜中最硬核、数学味最浓的一个. 它允许你通过定义一个 N x N 的卷积矩阵（Kernel）, 对图像中的每一个像素及其周围的邻域像素进行加权求和运算.

这个听起来很复杂的数学过程, 实际上是 Photoshop 中许多经典滤镜的底层原理, 包括：模糊、锐化、浮雕、边缘检测等.

核心原理：

对于图像中的每个像素, 滤镜会将它周围的像素值乘以矩阵中对应的数值, 然后将结果相加, 作为该像素的新颜色值.

关键参数：

order: 矩阵的大小, 通常是 3 (3x3) 或 5 (5x5).
kernelMatrix: 以空格或逗号分隔的数值列表, 定义了矩阵的具体权重. 这是灵魂所在.
divisor: 除数. 通常设为矩阵所有数值之和, 用于归一化颜色, 防止画面变得太亮或太暗.
bias: 偏移量. 在计算结果的基础上加上一个值. 常用于浮雕效果（将灰色设为基准）.

2、基础：浮雕效果 (Emboss)

浮雕效果通过让图像的一侧变亮, 另一侧变暗, 从而产生立体的光影感. 通常使用一个不对称的矩阵, 例如左上角为负, 右下角为正, 中间为 0.

预览

index.tsx

01<filter id="demo1-emboss">
02  {/* 
03    order="3": 3x3 矩阵
04    kernelMatrix:
05      -2 -1  0
06      -1  1  1
07       0  1  2
08    左上角为负（压暗）, 右下角为正（提亮）, 产生光源在右下角的错觉. 
09    bias="0.5": 将计算结果为 0 的区域（平坦区域）提升为中性灰, 而不是黑色. 
10  */}
11  <feConvolveMatrix 
12    order="3" 
13    kernelMatrix="-2 -1 0 -1 1 1 0 1 2" 
14    divisor="1" 
15    bias="0.5" 
16  />
17</filter>

3、进阶：边缘检测 (Edge Detection)

边缘检测用于提取图像的轮廓. 它的原理是寻找颜色发生剧烈变化的地方. 通过让中心像素的权重与周围像素的权重符号相反, 且总和为 0, 平坦区域（颜色相近）的结果就会变为 0（黑色）, 而边缘区域（颜色差异大）则会保留下来.

预览

index.tsx

01<filter id="demo2-edge">
02  {/* 
03    kernelMatrix:
04      0  1  0
05      1 -4  1
06      0  1  0
07    中心是 -4, 四周 4 个 1, 总和为 0. 
08    平坦区域：1+1+1+1 - 4 = 0 (黑色)
09    边缘区域：差异会被放大
10  */}
11  <feConvolveMatrix 
12    order="3" 
13    kernelMatrix="0 1 0 1 -4 1 0 1 0" 
14    preserveAlpha="true"
15  />
16</filter>
17
18<filter id="demo2-edge-neon">
19  {/* 更激进的边缘检测矩阵, 配合 Matrix 变色实现霓虹风格 */}
20  <feConvolveMatrix 
21    order="3" 
22    kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" 
23  />
24  <feColorMatrix type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" />
25</filter>

4、实用：图像锐化 (Sharpen)

锐化是摄影后期中不可或缺的一步. 它的原理与边缘检测类似, 但更为温和. 它通过增强中心像素的权重, 同时减去周围像素的权重, 来提高局部对比度, 使细节更加清晰. 注意矩阵数值的总和通常保持为 1, 以维持原图的整体亮度.

预览

index.tsx

01<filter id="demo3-sharpen">
02  {/* 
03    kernelMatrix:
04      0 -1  0
05     -1  5 -1
06      0 -1  0
07    总和：5 + (-4) = 1 (亮度不变)
08    中心像素被放大 5 倍, 然后减去周围的像素, 
09    这会拉大像素间的差异, 从而提升清晰度. 
10  */}
11  <feConvolveMatrix 
12    order="3" 
13    kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" 
14  />
15</filter>

5、总结

feConvolveMatrix 就像是像素世界的魔法棒. 只需要改变那几个数字, 就能产生完全不同的视觉效果.

求和为 1：保持亮度（如锐化、模糊）.
求和为 0：提取边缘（如边缘检测）.
不对称：产生方向感（如浮雕、动感模糊）.

专栏首页

到顶

专栏目录