運算子

示例

html,
body,
svg {
  height: 100%;
  font:
    20px "Helvetica",
    "Arial",
    sans-serif;
}

<svg viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg">
  <filter id="erode">
    <feMorphology operator="erode" radius="0.4" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="0.8" />
  </filter>

  <text x="0" y="15">Normal text</text>
  <text x="0" y="40" filter="url(#erode)">Thin text</text>
  <text x="0" y="65" filter="url(#dilate)">Fat text</text>
</svg>

feComposite

對於 <feComposite>，operator 定義了要執行的合成操作。

over

此值表示 in 屬性中定義的源圖形放置在 in2 屬性中定義的目標圖形之上。

in

此值表示 in 屬性中定義的源圖形與 in2 屬性中定義的目標圖形重疊的部分會替換目標圖形。

out

此值表示 in 屬性中定義的源圖形中，不在 in2 屬性中定義的目標圖形範圍內的部分會被顯示。

atop

此值表示 in 屬性中定義的源圖形與 in2 屬性中定義的目標圖形重疊的部分會替換目標圖形。目標圖形中與源圖形不重疊的部分保持不變。

xor

此值表示 in 屬性中定義的源圖形與 in2 屬性中定義的目標圖形的非重疊區域被組合。

lighter

此值表示 in 屬性中定義的源圖形與 in2 屬性中定義的目標圖形的總和將被顯示。

arithmetic

此值表示 in 屬性中定義的源圖形與 in2 屬性中定義的目標圖形將使用以下公式進行組合：

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

其中：i1 和 i2 分別表示輸入影像與 in 和 in2 對應的畫素通道值，而 k1、k2、k3 和 k4 表示具有相同名稱的屬性的值。

feMorphology

對於 <feMorphology>，operator 定義了是侵蝕（即變細）還是膨脹（變粗）源圖形。

erode

此值會使 in 屬性中定義的源圖形變細。

dilate

此值會使 in 屬性中定義的源圖形變粗。

規範