feConvolveMatrix - SVG 编辑

feConvolveMatrix元素应用了一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作，包括模糊、边缘检测、锐化、压花和斜角。

一个矩阵卷积是基于一个 nxm矩阵(卷积内核)，用来描述如何将给定的输入图像的像素值与相邻像素合并为一个输出像素值。每个输出像素是由应用的内核矩阵来处理相应的源像素和它的相邻像素。基本的卷积公式是对给定的每个像素进行如下应用:

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"表示‘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

<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>

属性

全局属性

• 核心属性 »
• 外观属性 »
• 滤镜属性 »
• class
• style

专有属性

• in
• order
• kernelMatrix
• divisor
• bias
• targetX
• targetY
• edgeMode
• kernelUnitLength
• preserveAlpha

DOM 接口

该元素实现了SVGFEConvolveMatrixElement接口。

参见

• <filter>
• <animate>
• <set>
• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>
• <feTurbulence>
• SVG教程：滤镜效果