<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

KategorienPrimitives Filterelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
<animate>, <discard>, <set>

Attribute

DOM-Schnittstelle

Dieses Element implementiert die SVGFEBlendElement Schnittstelle.

Beispiel

SVG

html
<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