<feComposite>

1. <feblend>
2. <fecolormatrix>
3. <fecomponenttransfer>
4. <fecomposite>
5. <feconvolvematrix>
6. <fediffuselighting>
7. <fedisplacementmap>
8. <feflood>
9. <fefunca>
10. <fefuncb>
11. <fefuncg>
12. <fefuncr>
13. <fegaussianblur>
14. <feimage>
15. <femerge>
16. <femergenode>
17. <femorphology>
18. <feoffset>
19. <fepointlight>
20. <fespecularlighting>
21. <fespotlight>
22. <fetile>
23. <feturbulence>
24. 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>

<feComposite> SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over , in , atop , out , xor , lighter ，或 arithmetic .

The table below shows each of these operations using an image of the MDN logo composited with a red circle:

操作	描述
over	The source graphic defined by the in 属性 (the MDN logo) is placed over the destination graphic defined by the in2 attribute (the circle). This is the default operation , which will be used if no operation or an unsupported operation is specified.
in	The parts of the source graphic defined by the in 属性 that overlap the destination graphic defined in the in2 attribute, replace the destination graphic.
out	The parts of the source graphic defined by the in 属性 that fall outside the destination graphic defined in the in2 attribute, are displayed.
atop	The parts of the source graphic defined in the in attribute, which overlap the destination graphic defined 在 in2 attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched.
xor	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	The sum of the source graphic defined in the in 属性 and the destination graphic defined in the in2 属性为 displayed.
arithmetic	arithmetic operation is useful for combining the output from the <feDiffuseLighting> and <feSpecularLighting> filters with texture data. If the arithmetic operation is chosen, each result pixel is computed 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 k1 , k2 , k3 ，和 k4 indicate the values of the attributes with the same name.

Usage context

属性

全局属性

• Core attributes
• Presentation attributes
• Filter primitive attributes
• class
• style

Specific attributes

• in : First input for the given filter primitive.
• in2 : Second input for the given filter primitive (works the same as the in 属性)。
• operator : over | in | out | atop | xor | lighter | arithmetic
• k1 , k2 , k3 , k4 : Values used for calculating the result pixel in arithmetic operator filter primitives.

DOM Interface

This element implements the SVGFECompositeElement 接口。

范例

This example defines filters for each of the supported operations ( over , atop , lighter , etc.), which composite an input SourceGraphic with an image of the MDN logo. The filters are each applied to a circle element, which is then used as the SourceGraphic .

注意： BackgroundImage cannot be used as a compositing source on modern browsers, so we can't define a filter that composites using whatever pixels happen to be under the filter as one of the sources. The approach taken here is a workaround because we can't use BackgroundImage .

SVG

<svg style="width:800px; height:400px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageOver">
      <feImage xlink:href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="over"/>
    </filter>
    <filter id="imageIn">
      <feImage xlink:href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="in"/>
    </filter>
    <filter id="imageOut">
      <feImage xlink:href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="out"/>
    </filter>
    <filter id="imageAtop">
      <feImage xlink:href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="atop"/>
    </filter>
    <filter id="imageXor">
      <feImage xlink:href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="xor"/>
    </filter>
    <filter id="imageArithmetic">
      <feImage xlink:href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="arithmetic" k1="0.1" k2="0.2" k3="0.3" k4="0.4" />
    </filter>
    <filter id="imageLighter">
      <feImage xlink:href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="lighter"/>
    </filter>
  </defs>
  <g transform="translate(0,25)">
    <circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageOver)"/>
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageIn)"/>
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageOut)"/>
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageAtop)"/>
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageXor)"/>
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageArithmetic)"/>
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle cx="90px" cy="80px" r="70px" fill="#c00" style="filter:url(#imageLighter)"/>
    <text x="80" y="-5">lighter</text>
  </g>
</svg>

							

结果

规范

浏览器兼容性

BCD tables only load in the browser

另请参阅

• <filter>
• <animate>
• <set>
• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>
• <feTurbulence>
• SVG tutorial: Filter effects

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 贡献者