<feConvolveMatrix>

<feConvolveMatrix> SVG 滤镜原语应用矩阵卷积的滤镜效果。卷积是将输入图像中的像素与相邻像素组合以生成结果图像。通过卷积可以实现各种各样的图像操作，包括模糊、边缘检测、锐化、浮雕和斜角。

矩阵卷积基于 n*m 矩阵（卷积核），其描述了如何将输入图像中的给定像素值与其相邻像素值组合在一起以生成结果像素值。每个结果像素是通过将卷积核矩阵应用于相应的源像素及其相邻像素来确定的。对于给定像素的每个颜色值，应用的基本卷积公式如下：

$$COLOR_{X,Y} = \frac{ \sum_{I=0}^{orderX-1} \sum_{J=0}^{orderX-1}{\left( SOURCE_{X-targetX+J, Y-targetY+I} * kernelMatrix_{orderX-J-1, orderY-I-1} \right)}}{divsor + bias * ALPHA_{X, Y}}$$

其中“orderX”和“orderY”表示 order 的 X 和 Y 值，“targetX”表示 targetX 属性的值，“targetY”表示 targetY 的值，“kernelMatrix”表示 kernelMatrix 属性的值，“divisor”表示 divisor 属性的值，“bias”表示 bias 属性的值。

注意上述公式中，卷积矩阵是在相对于源和目标图像旋转 180 度的情况下应用的，以便与许多计算机图形学教科书中描述的卷积理论相匹配。

这里举例说明，假设你有一个 5x5 像素的输入图像，其中一个颜色通道的色值如下：

0    20  40 235 235
100 120 140 235 235
200 220 240 235 235
225 225 255 255 255
225 225 255 255 255

然后定义一个如下的 3*3 卷积核：

1 2 3
4 5 6
7 8 9

让我们专注于图像的第二行和第二列的颜色值（源像素值为 120）。假定最简单的情况（输入图像的像素网格与卷积核的像素网格完全对齐），且“divisor”、“targetX”和“targetY”都具有默认值，那么结果的颜色值会是：

(9*0   + 8*20  + 7*40 +
 6*100 + 5*120 + 4*140 +
 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)

<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="emboss">
      <feConvolveMatrix
        kernelMatrix="3 0 0
                      0 0 0
                      0 0 -3" />
    </filter>
  </defs>

  <image
    href="mdn.svg"
    x="0"
    y="0"
    height="200"
    width="200"
    style="filter:url(#emboss);" />
</svg>