SVGFEBlendElement.mode — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEBlendElement.mode

Beschreibung

Über SVGFEBlendElement.mode lesen oder ändern Sie per Skript den Mischmodus eines <feBlend>-Filterprimitivs. Der Mischmodus legt fest, wie die beiden Eingaben in und in2 verrechnet werden, etwa mit multiply, screen oder overlay. Welche Modi es gibt, ist in der Spezifikation Compositing and Blending festgelegt. Es sind dieselben Modi wie bei der CSS-Eigenschaft mix-blend-mode.

Die Eigenschaft selbst ist schreibgeschützt. Sie liefert aber ein SVGAnimatedEnumeration-Objekt mit zwei Werten:

baseVal: der Grundwert als Zahl. Dieser Wert ist beschreibbar, und eine Änderung ändert auch das Attribut.
animVal: der aktuelle, gegebenenfalls durch SMIL animierte Wert. Dieser Wert ist nur lesbar.

Die Zahlen entsprechen den Konstanten von SVGFEBlendElement: SVG_FEBLEND_MODE_UNKNOWN (0), NORMAL (1), MULTIPLY (2), SCREEN (3), DARKEN (4), LIGHTEN (5), OVERLAY (6), COLOR_DODGE (7), COLOR_BURN (8), HARD_LIGHT (9), SOFT_LIGHT (10), DIFFERENCE (11), EXCLUSION (12), HUE (13), SATURATION (14), COLOR (15) und LUMINOSITY (16). Fehlt das Attribut, gilt normal (1).

Die Eigenschaft ist nützlich, um Filtereffekte dynamisch umzuschalten, zum Beispiel in Bildeditoren oder bei interaktiven Überblendungen. Dafür müssen Sie keine Attribut-Zeichenketten zusammenbauen.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Ein Objekt mit baseVal (beschreibbar, number) und animVal (nur lesbar, number). Beide Werte entsprechen den Konstanten SVGFEBlendElement.SVG_FEBLEND_MODE_*.

Beispiele

Aktuellen Mischmodus auslesen

const SVG_NS = 'http://www.w3.org/2000/svg';
const blend = document.createElementNS(SVG_NS, 'feBlend');
blend.setAttribute('in', 'SourceGraphic');
blend.setAttribute('in2', 'BackgroundImage');
blend.setAttribute('mode', 'multiply');

console.log(blend.mode.baseVal);
console.log(blend.mode.baseVal === SVGFEBlendElement.SVG_FEBLEND_MODE_MULTIPLY);

2 true

Mischmodus per Skript umschalten

// Voraussetzung im HTML:
// <svg><filter id="f"><feBlend id="blend" in="SourceGraphic" in2="BackgroundImage"/></filter></svg>
const blend = document.getElementById('blend');

console.log(blend.mode.baseVal); // Standardwert: normal

// Über die Konstante setzen, das Attribut wird automatisch angepasst
blend.mode.baseVal = SVGFEBlendElement.SVG_FEBLEND_MODE_SCREEN;
console.log(blend.getAttribute('mode'));

1 screen

Zahlenwert in lesbaren Namen übersetzen

const MODE_NAMES = [
  'unknown', 'normal', 'multiply', 'screen', 'darken', 'lighten',
  'overlay', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
  'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
];

const getBlendModeName = (feBlend) => MODE_NAMES[feBlend.mode.animVal] ?? 'unknown';

const blend = document.createElementNS('http://www.w3.org/2000/svg', 'feBlend');
blend.setAttribute('mode', 'difference');
console.log(getBlendModeName(blend));

difference

// Wichtig · Fallstricke

Nicht direkt zuweisbar: blend.mode = 'screen' hat keine Wirkung, denn mode ist schreibgeschützt. Ändern Sie stattdessen blend.mode.baseVal oder rufen Sie setAttribute('mode', 'screen') auf.
Zahlen statt Zeichenketten: baseVal und animVal sind Zahlen. Den Namen des Modus erhalten Sie über getAttribute('mode') oder über eine eigene Zuordnungstabelle.
UNKNOWN: Wenn Sie baseVal auf 0 (SVG_FEBLEND_MODE_UNKNOWN) oder auf einen ungültigen Wert setzen, lösen Browser nach SVG 2 einen TypeError aus. Ein ungültiges Attribut ergibt beim Lesen 0.
Kompatibilität: Die Grundmodi 1–5 (normal bis lighten) werden überall unterstützt. Die erweiterten Modi 6–16 gibt es in aktuellen Versionen von Chrome, Firefox und Safari. Sehr alte Browser liefern dafür eventuell 0.
BackgroundImage: Die Eingabe in2="BackgroundImage" wird von den meisten Browsern nicht unterstützt. Verwenden Sie für in2 besser das Ergebnis eines anderen Filterprimitivs, zum Beispiel von feFlood oder feImage.

Siehe auch

SVGFEBlendElement SVGFEBlendElement.in1 SVGFEBlendElement.in2 SVGAnimatedEnumeration SVGFECompositeElement Element.setAttribute() HTMLTableRowElement.chOff