feconvolvematrix

<feConvolveMatrix>SVG滤波器原始应用矩阵卷积滤波器的效果。卷积将输入图像中的像素与相邻像素结合以产生最终的图像。通过卷积可以实现各种各样的成像操作，包括模糊，边缘检测，锐化，压花和斜切。

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

COLORX,Y = (

SUM I=0 to [orderY-1] {

SUM J=0 to [orderX-1] {

SOURCE X-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1

}

}

) / divisor + bias * ALPHAX,Y

其中“orderX”和“orderY”表示用于在X和Y值‘order’属性，“targetX”表示的值“targetX”属性，“targetY”表示的值“targetY”属性，“kernelMatrix”表示'kernelMatrix'属性的值，“除数”表示‘divisor’属性的值，“偏差”表示‘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)

用法上下文

属性

全局属性

• Core attributes

• Presentation attributes

• Filter primitive attributes

• class

• style

具体属性

• in

• order

• kernelMatrix

• divisor

• bias

• targetX

• targetY

• edgeMode

• kernelUnitLength

• preserveAlpha

DOM接口

这个元素实现了SVGFEConvolveMatrixElement接口。

例

SVG

<svg 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 xlink:href="/files/12668/MDN.svg" x="0" y="0"
      height="200" width="200" style="filter:url(#emboss);" />
</svg>

Result

​

产品规格

浏览器兼容性