<feBlend>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <feBlend>
-SVG-Filterprimitive kombiniert zwei Objekte miteinander, basierend auf einem bestimmten Mischmodus. Dies ist vergleichbar mit dem, was aus Bildbearbeitungssoftware beim Mischen zweier Ebenen bekannt ist. Der Modus wird durch das Attribut mode
definiert.
Wie andere Filter-Primitiven verarbeitet es Farbkomponenten standardmäßig im linearRGB
-Farbraum. Sie können color-interpolation-filters
verwenden, um stattdessen sRGB
zu verwenden.
Verwendungskontext
Attribute
DOM-Interface
Dieses Element implementiert das SVGFEBlendElement
-Interface.
Beispiel
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
href="mdn_logo_only_color.png"
x="10%"
y="10%"
width="80%"
height="80%"
style="filter:url(#spotlight);" />
</svg>
Ergebnis
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # feBlendElement |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
feBlend | ||||||||||||
in | ||||||||||||
in2 | ||||||||||||
mode |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- SVG-Filterprimitive-Attribute
<filter>
<animate>
<set>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG-Tutorial: Filtereffekte