operator

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

operator attribute has two meanings based on the context it's used in. Either it defines the compositing or morphing operation to be performed.

You can use this attribute with the following SVG elements:

范例

html, body, svg {
  height: 100%;
  font: 20px Arial, Helvetica, 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

For <feComposite> , operator defines the compositing operation that is to be performed.

值	`over` \| `in` \| `out` \| `atop` \| `xor` \| `lighter` \| `arithmetic`
默认值	`over`
Animatable	Yes

over
in
out
atop
xor
lighter
arithmetic

feMorphology

For <feMorphology> , operator defines whether to erode (i.e., thin) or dilate (fatten) the source graphic.

值	`erode` \| `dilate`
默认值	`erode`
Animatable	Yes

erode
dilate

规范

规范	状态	注释
Filter Effects Module Level 1 The definition of 'operator for <feMorphology>' in that specification.	工作草案	无变化
Filter Effects Module Level 1 The definition of 'operator for <feComposite>' in that specification.	工作草案	Refers to CSS Compositing and Blending specification for the values and added the `lighter` 值。
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'operator for <feMorphology>' in that specification.	推荐	Initial definition for `<feMorphology>`
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'operator for <feComposite>' in that specification.	推荐	Initial definition for `<feComposite>`

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者