操作符

示例

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 属性中定义的源图形变粗。

规范