<feConvolveMatrix>

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

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

$$\left(color\right)_{X , Y} = \frac{\sum_{i = 0}^{orderY - 1} \sum_{j = 0}^{orderX - 1} \left(source\right)_{x - targetX + j , y - \mathit{targetY} + i} \cdot \left(kernalMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}$$

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

请注意，在上述公式中，内核矩阵中的值应用的方式使得内核矩阵相对于源图像和目标图像旋转 180 度，以匹配许多计算机图形学教科书中描述的卷积理论。

为了说明，假设您有一个 5×5 像素的输入图像，其一个颜色通道的颜色值如下所示

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>