<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 fügt zwei Objekte gemäß einem bestimmten Überblendmodus zusammen. Dies ist vergleichbar mit dem, was aus Bildbearbeitungssoftware bekannt ist, wenn zwei Ebenen gemischt werden. Der Modus wird durch das Attribut mode definiert.

Nutzungskontext

Kategorien	Primitives Filterelement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: `<animate>`, `<set>`

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%"
    style="filter:url(#spotlight);" />
</svg>

Ergebnis

Spezifikationen

Specification
Filter Effects Module Level 1 # feBlendElement

Browser-Kompatibilität

BCD tables only load in the browser