SVGFEMergeNodeElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEMergeNodeElement extends SVGElement

Beschreibung

Die Schnittstelle SVGFEMergeNodeElement steht im DOM für das SVG-Element <feMergeNode>. Dieses Element kommt nur als Kind von <feMerge> vor. Jeder Knoten verweist über sein Attribut in auf ein Zwischenergebnis des Filters. Das kann die Ausgabe eines anderen Filter-Primitivs sein (über dessen result) oder eine Standardeingabe wie SourceGraphic bzw. SourceAlpha.

<feMerge> legt die Eingaben seiner <feMergeNode>-Kinder in Dokumentreihenfolge übereinander. Dabei wird der Operator source-over verwendet: Der erste Knoten liegt unten, der letzte oben. Typische Anwendungen sind Schlagschatten, Leuchteffekte (Glow) und das Kombinieren mehrerer Unschärfe-Stufen mit der Originalgrafik.

Die Schnittstelle erbt von SVGElement und bringt genau eine eigene Eigenschaft mit: in1 vom Typ SVGAnimatedString. Sie spiegelt das Attribut in. Mit in1.baseVal liest und setzt man den Wert, in1.animVal liefert den aktuell animierten Wert (nur lesbar). So kann man per Skript dynamisch ändern, welche Ebene zusammengeführt wird.

Parameter

Name	Typ	Default	Beschreibung
$in1	SVGAnimatedString		Nur lesbare Eigenschaft, die das Attribut `in` spiegelt. Über `in1.baseVal` lässt sich der Eingabename lesen und schreiben, z. B. `'SourceGraphic'` oder der `result`-Name eines anderen Primitivs.

Rückgabewert

Typ

SVGFEMergeNodeElement

Beschreibung

Instanzen entstehen durch Parsen von SVG-Markup oder durch document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode'). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Schlagschatten per Skript erzeugen (Instanziierung)

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const defs = document.createElementNS(SVG_NS, 'defs');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'schatten';

const blur = document.createElementNS(SVG_NS, 'feGaussianBlur');
blur.setAttribute('in', 'SourceAlpha');
blur.setAttribute('stdDeviation', '3');
blur.setAttribute('result', 'unscharf');

const offset = document.createElementNS(SVG_NS, 'feOffset');
offset.setAttribute('in', 'unscharf');
offset.setAttribute('dx', '4');
offset.setAttribute('dy', '4');
offset.setAttribute('result', 'versetzt');

const merge = document.createElementNS(SVG_NS, 'feMerge');
// Reihenfolge: zuerst Schatten (unten), dann Original (oben)
for (const quelle of ['versetzt', 'SourceGraphic']) {
  const node = document.createElementNS(SVG_NS, 'feMergeNode');
  node.setAttribute('in', quelle);
  merge.append(node);
}

filter.append(blur, offset, merge);
defs.append(filter);
svg.prepend(defs);
svg.querySelector('rect').setAttribute('filter', 'url(#schatten)');

console.log(merge.firstElementChild instanceof SVGFEMergeNodeElement);

true

Eingabe über in1 auslesen und ändern

// <feMerge><feMergeNode id="n1" in="glow"/><feMergeNode in="SourceGraphic"/></feMerge>
const node = document.getElementById('n1');

console.log(node.in1.baseVal);

// Leuchteffekt abschalten: stattdessen den Alphakanal verwenden
node.in1.baseVal = 'SourceAlpha';
console.log(node.getAttribute('in'));

glow SourceAlpha

Alle Merge-Knoten eines Filters auflisten

const nodes = document.querySelectorAll('#schatten feMergeNode');
const ebenen = [...nodes].map((n, i) => `${i}: ${n.in1.baseVal || '(vorheriges Ergebnis)'}`);
console.log(ebenen.join('\n'));

0: versetzt 1: SourceGraphic

// Wichtig · Fallstricke

Die Eigenschaft heißt in1 und nicht in, weil in ein reserviertes Wort in JavaScript ist. Das Attribut im Markup heißt dagegen in.
SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden. Mit document.createElement('feMergeNode') entsteht ein unbekanntes HTML-Element ohne Filterwirkung.
Die Reihenfolge der Knoten bestimmt die Stapelung: Der letzte Knoten liegt oben. Schatten gehören deshalb vor SourceGraphic.
Fehlt in, wird beim ersten Primitiv eines Filters SourceGraphic verwendet, sonst das Ergebnis des vorherigen Primitivs. Verweist in auf einen result-Namen, der nicht existiert, gilt dieselbe Regel. Das kann zu unerwarteten Ergebnissen führen.
Die Schnittstelle wird in allen modernen Browsern unterstützt. Komplexe Filter können vor allem bei großen oder animierten Flächen viel Renderleistung kosten.

Siehe auch

SVGFEMergeElement SVGFEGaussianBlurElement SVGFEOffsetElement SVGFilterElement SVGAnimatedString SVGElement