<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 Filter-Primitive kombiniert zwei Objekte anhand eines bestimmten Mischmodus. Dies ist ähnlich zu dem, was in Bildbearbeitungssoftware bekannt ist, wenn zwei Ebenen gemischt werden. Der Modus wird durch das mode
Attribut definiert.
Wie andere Filter-Primitives verarbeitet es Farbkomponenten standardmäßig im linearRGB
Farbraum. Sie können color-interpolation-filters
verwenden, um stattdessen sRGB
zu nutzen.
Verwendungskontext
Attribute
DOM-Schnittstelle
Dieses Element implementiert die SVGFEBlendElement
Schnittstelle.
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%"
filter="url(#spotlight)" />
</svg>
Ergebnis
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # feBlendElement |
Browser-Kompatibilität
Siehe auch
- SVG-Filter-Primitive-Attribute
<filter>
<animate>
<set>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG-Leitfaden: Filter-Effekte