<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 ç©éµï¼å·ç§¯æ ¸ï¼ï¼å ¶æè¿°äºå¦ä½å°è¾å ¥å¾åä¸çç»å®åç´ å¼ä¸å ¶ç¸é»åç´ å¼ç»åå¨ä¸èµ·ä»¥çæç»æåç´ å¼ãæ¯ä¸ªç»æåç´ æ¯éè¿å°å·ç§¯æ ¸ç©éµåºç¨äºç¸åºçæºåç´ åå ¶ç¸é»åç´ æ¥ç¡®å®çã对äºç»å®åç´ çæ¯ä¸ªé¢è²å¼ï¼åºç¨çåºæ¬å·ç§¯å ¬å¼å¦ä¸ï¼
å
¶ä¸â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)
使ç¨ä¸ä¸æ
屿§
DOM æ¥å£
该å
ç´ å®ç°äº SVGFEConvolveMatrixElement æ¥å£ã
示ä¾
>SVG
<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 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>
ç»æ
è§è
| Specification |
|---|
| Filter Effects Module Level 1 > # feConvolveMatrixElement > |