feConvolveMatrix
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 (en-US)
style
专有属性
DOM 接口
该元素实现了SVGFEConvolveMatrixElement
接口。