# <feConvolveMatrix>

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

$C O L O R X , Y = ∑ I = 0 o r d e r X − 1 ∑ 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}}$

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


1 2 3
4 5 6
7 8 9


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


## 属性

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

## 示例

### SVG

html
<svg
width="200"
height="200"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
<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"
style="filter:url(#emboss);" />
</svg>


## 浏览器兼容性

BCD tables only load in the browser