就业培训     下载中心     Wiki     联络
登录   注册

Log
  1. 首页
  2. SVG:可伸缩向量图形
  3. SVG Attribute reference
  4. operator

内容表

  • 范例
  • feComposite
  • feMorphology
  • 规范

operator

  1. SVG 元素
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    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
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    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:

  • <feComposite>
  • <feMorphology>

范例

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

This value indicates that the source graphic defined in the in attribute is placed over the destination graphic defined in the in2 属性。

in

This value indicates that the parts of the source graphic defined in the in attribute that overlap the destination graphic defined in the in2 attribute, replace the destination graphic.

out

This value indicates that the parts of the source graphic defined in the in attribute that fall outside the destination graphic defined in the in2 attribute, are displayed.

atop

This value indicates that the parts of the source graphic defined in the in attribute, which overlap the destination graphic defined in the in2 attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched.

xor

This value indicates that the non-overlapping regions of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined.

lighter

This value indicates that the sum of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute is displayed.

arithmetic

This value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula:

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

其中: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1 , k2 , k3 ,and k4 indicate the values of the attributes with the same name.

feMorphology

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

值 erode | dilate
默认值 erode
Animatable Yes
erode

This value thins the source graphic defined in the in 属性。

dilate

This value fattens the source graphic defined in the in 属性。

规范

规范 状态 注释
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 贡献者

版权所有  © 2014-2026 乐数软件    

工业和信息化部: 粤ICP备14079481号-1