<feConvolveMatrix>

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

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

color X , Y = i = 0 orderY 1 j = 0 orderX 1 source x targetX + j , y targetY + i kernalMatrix orderX j 1, orderY i 1 divisor + bias alpha x , y \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(kernalMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}

其中“orderX”和“orderY”表示order屬性的 X 和 Y 值,“targetX”表示targetX屬性的值,“targetY”表示targetY屬性的值,“kernelMatrix”表示kernelMatrix屬性的值,“divisor”表示divisor屬性的值,“bias”表示bias屬性的值。

請注意,在上述公式中,核心矩陣中的值應用的方式使得核心矩陣相對於源影像和目標影像旋轉 180 度,以匹配許多計算機圖形學教科書中描述的卷積理論。

為了說明,假設您有一個 5×5 畫素的輸入影像,其一個顏色通道的顏色值如下所示

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)

使用上下文

類別濾鏡基元元素
允許的內容任意數量的以下元素,按任意順序
<animate><set>

屬性

DOM 介面

此元素實現SVGFEConvolveMatrixElement介面。

示例

SVG

html
<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>

結果

規範

規範
濾鏡效果模組級別 1
# feConvolveMatrixElement

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱