<feConvolveMatrix>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<feConvolveMatrix> SVG 濾鏡圖元應用矩陣卷積濾鏡效果。卷積會組合輸入影像中的畫素與相鄰畫素，以生成結果影像。透過卷積可以實現各種各樣的影像操作，包括模糊、邊緣檢測、銳化、浮雕和斜角等。

矩陣卷積基於一個 n x m 的矩陣（卷積核），該矩陣描述了輸入影像中給定畫素值如何與相鄰畫素值組合以生成結果畫素值。每個結果畫素是透過將核矩陣應用於相應的源畫素及其相鄰畫素來確定的。應用於給定畫素每個顏色值的基本卷積公式為：

\left(color\right)_{X , Y} = \frac{\sum_{i = 0}^{orderY - 1} \sum_{j = 0}^{orderX - 1} \left(source\right)_{x - targetX + j , y - \mathit{targetY} + i} \cdot \left(kernelMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}

其中 "orderX" 和 "orderY" 分別代表 order 屬性的 X 和 Y 值，其他變數指的是 targetX、targetY、kernelMatrix、divisor 和 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

並且您定義了一個 3x3 的卷積核如下：

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)

與其它濾鏡圖元一樣，它預設在 linearRGB 顏色空間中處理顏色分量。您可以使用 color-interpolation-filters 屬性改為使用 sRGB。

使用語境

分類	濾鏡圖元元素
允許內容	可包含任意數量、任意順序的下列元素 `<animate>`、`<discard>`、`<set>`

<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"
    filter="url(#emboss)" />
</svg>