<feBlend>

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <feBlend> SVG-Filter-Primitive kombiniert zwei Objekte miteinander gemäß einem bestimmten Mischmodus. Dies ist ähnlich dem, was aus 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 verwenden.

In diesem Artikel

Nutzungskontext

KategorienErlaubter Inhalt

Primitives Filterelement

Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
<animate>, <set>

Attribute

in
in2
mode
Filter-Primitive-Attribute: x, y, width, height, result

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>

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<feBlend>

In diesem Artikel

Nutzungskontext

Attribute

DOM-Schnittstelle

Beispiel

SVG

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN