内容表

• Usage context
• 属性
• DOM Interface
• 范例
• 规范
• 浏览器兼容性
• 另请参阅

<feBlend>

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>

<feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the mode 属性。

Usage context

类别	Filter primitive element
准许内容	Any number of the following elements, in any order: <animate> , <set>

属性

全局属性

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

Specific attributes

• in
• in2
• mode

DOM Interface

This element implements the SVGFEBlendElement 接口。

范例

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"


xmlns:

xlink



=


"

http://www.w3.org/1999/xlink

"



>





<

defs


>





<

filter


id



=


"

spotlight

"



>





<

feFlood


result



=


"

floodFill

"



x



=


"

0

"



y



=


"

0

"



width



=


"

100%

"



height



=


"

100%

"



flood-color



=


"

green

"



flood-opacity



=


"

1

"



/>





<

feBlend


in



=


"

SourceGraphic

"



in2



=


"

floodFill

"



mode



=


"

multiply

"



/>





</

filter


>





</

defs


>





<

image



xlink:

href



=


"

//developer.mozilla.org/files/6457/mdn_logo_only_color.png

"



x



=


"

10%

"



y



=


"

10%

"



width



=


"

80%

"



height



=


"

80%

"




style



=


"



filter


:



url


(

#spotlight

)



;



"




/>





</

svg


>



					

结果

规范

规范
Filter Effects Module Level 2 (Filter Effects 2) # feBlendElement

浏览器兼容性

BCD tables only load in the browser

另请参阅

• <filter>
• <animate>
• <set>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <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 贡献者