<feConvolveMatrix>

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

矩阵卷积基于一个 n x 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(kernelMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}

其中 "orderX" 和 "orderY" 分别代表 order 属性的 X 和 Y 值，其他变量指的是 targetX、targetY、kernelMatrix、divisor 和 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

并且您定义了一个 3x3 的卷积核如下：

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)

与其它滤镜图元一样，它默认在 linearRGB 颜色空间中处理颜色分量。您可以使用 color-interpolation-filters 属性改为使用 sRGB。

使用语境

分类	滤镜图元元素
允许内容	可包含任意数量、任意顺序的下列元素 `<animate>`、`<discard>`、`<set>`

<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"
    filter="url(#emboss)" />
</svg>