DAY 30
1

## Day30+1 - SVG filter - feConvolveMatrix

Photoshop ( 濾鏡>其他>自訂 )

Premiere ( Effect 搜尋 Convolution )

1.order

2.kernelMatrix = "list of numbers"
feConvolveMatrix 最關鍵的屬性，裏頭擺放的就是矩陣，因為在計算的時候，矩陣內容總和會作為分母， 如果分母等於 0，在數學上是不成立的，這時候整體除出來的數值就會變成 1，通常在寫的時候，會以矩陣的方式換行來寫，但如果覺得換行很佔空間，也是可以把 3x3 共九個數字寫成一排，中間記得要空格就是了。 而且在 SVG 裏頭計算起來，其實是與要相反過來看，也就是剛剛上面提到 Ax1 + Bx2 + Cx3 + Dx4 + Ex5 + Fx6 + Gx7 + Hx8 + Ix9，在 SVG 實際上是 Ax9 + Bx8 + Cx7 + Dx6 + Ex5 + Fx4 + Gx3 + Bx2 + Ax1，下圖是一個簡單的示意：

3.divisor

4.bias

5.targetX、targetY

6.edgeMode = "duplicate | wrap | none"

7.kernelUnitLength

8.preserveAlpha = "false | true"

``````<feConvolveMatrix order="3" kernelMatrix="
1  1  1
1  1  1
1  1  1" edgeMode="none">
</feConvolveMatrix>
``````

``````<feConvolveMatrix order="3" kernelMatrix="
3  0  3
0  0  0
3  0  3" edgeMode="none">
</feConvolveMatrix>
``````

``````<feConvolveMatrix order="3" kernelMatrix="
0 -1  0
-1  5 -1
0 -1  0" edgeMode="none">
</feConvolveMatrix>
``````

``````<feConvolveMatrix order="3" kernelMatrix="
0 -2  0
-2  15 -2
0 -2  0" edgeMode="none">
</feConvolveMatrix>
``````

``````<feConvolveMatrix order="3" kernelMatrix="
1  1  1
1 -6  1
1  1  1" edgeMode="none">
</feConvolveMatrix>
``````

``````<feConvolveMatrix order="3" kernelMatrix="
-2 -1  0
-1  1  1
0  1  2" edgeMode="none">
</feConvolveMatrix>
``````

``````<feConvolveMatrix order="3" kernelMatrix="
-9 -2  0
-2  1  2
0  2  9" edgeMode="none">
</feConvolveMatrix>
``````

``````<feConvolveMatrix order="3" kernelMatrix="
2  0  0
0 -1  0
0  0 -1" edgeMode="none" bias="100">
</feConvolveMatrix>
``````

SVG 30 天 ~ 就要醬玩31