SVGFEBlendElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEBlendElement extends SVGElement

Beschreibung

SVGFEBlendElement ist die DOM-Schnittstelle zum Element <feBlend>. Das Element steht innerhalb eines <filter> und legt zwei Eingabebilder (in und in2) mit einem Mischmodus übereinander. Die Modi entsprechen denen aus Bildbearbeitungsprogrammen bzw. der CSS-Eigenschaft mix-blend-mode, z. B. normal, multiply, screen, darken, lighten, overlay, difference oder luminosity.

Die Schnittstelle erbt von SVGElement und bindet SVGFilterPrimitiveStandardAttributes ein. Damit stehen neben den eigenen Eigenschaften auch x, y, width, height (jeweils SVGAnimatedLength) und result (SVGAnimatedString) zur Verfügung. Eigene Eigenschaften sind:

in1 (SVGAnimatedString, nur lesbar): entspricht dem Attribut in, also der ersten Eingabe (z. B. SourceGraphic oder der result-Name eines vorherigen Filterschritts).
in2 (SVGAnimatedString, nur lesbar): entspricht dem Attribut in2, also der zweiten Eingabe (dem Hintergrund der Mischung).
mode (SVGAnimatedEnumeration, nur lesbar): entspricht dem Attribut mode. mode.baseVal enthält eine der Konstanten SVG_FEBLEND_MODE_*.

Konstanten: SVG_FEBLEND_MODE_UNKNOWN (0), NORMAL (1), MULTIPLY (2), SCREEN (3), DARKEN (4), LIGHTEN (5) sowie laut Filter Effects Level 1 OVERLAY (6), COLOR_DODGE (7), COLOR_BURN (8), HARD_LIGHT (9), SOFT_LIGHT (10), DIFFERENCE (11), EXCLUSION (12), HUE (13), SATURATION (14), COLOR (15), LUMINOSITY (16), jeweils mit dem Präfix SVG_FEBLEND_MODE_. Die Schnittstelle kommt zum Einsatz, wenn Filter per Skript erzeugt, ausgelesen oder zur Laufzeit verändert werden sollen, etwa für interaktive Bildeffekte, Duotone-Effekte oder Überblendungen.

Rückgabewert

Typ

SVGFEBlendElement

Beschreibung

Instanzen entstehen über document.createElementNS('http://www.w3.org/2000/svg', 'feBlend') oder durch Auslesen eines vorhandenen <feBlend>-Elements aus dem DOM. Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

feBlend-Filter per Skript erzeugen und anwenden

const SVG_NS = 'http://www.w3.org/2000/svg';

const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '120');

const defs = document.createElementNS(SVG_NS, 'defs');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'blend-multiply';

// Zweite Eingabe: eine rote Farbfläche
const flood = document.createElementNS(SVG_NS, 'feFlood');
flood.setAttribute('flood-color', 'tomato');
flood.setAttribute('result', 'farbe');

// feBlend mischt Quellgrafik und Farbfläche
const blend = document.createElementNS(SVG_NS, 'feBlend');
blend.setAttribute('in', 'SourceGraphic');
blend.setAttribute('in2', 'farbe');
blend.setAttribute('mode', 'multiply');

filter.append(flood, blend);
defs.append(filter);

const rect = document.createElementNS(SVG_NS, 'rect');
rect.setAttribute('width', '200');
rect.setAttribute('height', '120');
rect.setAttribute('fill', 'skyblue');
rect.setAttribute('filter', 'url(#blend-multiply)');

svg.append(defs, rect);
document.body.append(svg);

console.log(blend instanceof SVGFEBlendElement);
console.log(blend.in1.baseVal, blend.in2.baseVal);
console.log(blend.mode.baseVal === SVGFEBlendElement.SVG_FEBLEND_MODE_MULTIPLY);

true SourceGraphic farbe true

Mischmodus eines vorhandenen Filters auslesen

// HTML: <svg><filter id="f"><feBlend id="mix" in="SourceGraphic" in2="BackgroundImage" mode="screen"/></filter></svg>
const blend = document.querySelector('#mix');

const modusNamen = {
  [SVGFEBlendElement.SVG_FEBLEND_MODE_NORMAL]: 'normal',
  [SVGFEBlendElement.SVG_FEBLEND_MODE_MULTIPLY]: 'multiply',
  [SVGFEBlendElement.SVG_FEBLEND_MODE_SCREEN]: 'screen',
  [SVGFEBlendElement.SVG_FEBLEND_MODE_DARKEN]: 'darken',
  [SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN]: 'lighten'
};

const code = blend.mode.baseVal;
console.log(`Modus ${code}: ${modusNamen[code] ?? 'erweitert/unbekannt'}`);

Modus 3: screen

Mischmodus interaktiv über ein Auswahlfeld umschalten

// HTML: <select id="modus"><option>normal</option><option>multiply</option>
//        <option>screen</option><option>overlay</option><option>difference</option></select>
const blend = document.querySelector('feBlend');
const auswahl = document.querySelector('#modus');

auswahl.addEventListener('change', () => {
  // setAttribute funktioniert auch für Modi ohne Konstante im jeweiligen Browser
  blend.setAttribute('mode', auswahl.value);
  console.log('Neuer Modus-Code:', blend.mode.baseVal);
});

// Alternativ direkt per Enumeration setzen:
blend.mode.baseVal = SVGFEBlendElement.SVG_FEBLEND_MODE_DARKEN;
console.log(blend.getAttribute('mode'));

darken

Siehe auch

SVGFEFloodElement SVGFETileElement SVGFEFuncAElement SVGFEFuncBElement SVGFEFuncGElement