View in EnglishAlways switch to English

<feConvolveMatrix>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

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

C O L O R_{X, Y} = \frac{\sum_{I = 0}^{o r d e r X - 1} \sum_{J = 0}^{o r d e r X - 1} (S O U R C E_{X - t a r g e t X + J, Y - t a r g e t Y + I} * k e r n e l M a t r i x_{o r d e r X - J - 1, o r d e r Y - I - 1})}{d i v s o r + b i a s * A L P H A_{X, Y}} 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 235100 120 140 235 235200 220 240 235 235225 225 255 255 255225 225 255 255 255

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

1 2 34 5 67 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)

使用上下文

类别	滤镜元素
允许的内容	任意数量、任意顺序的下列元素： `<animate>`、`<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>      <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"    /></svg>