SVGFEMorphologyElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEMorphologyElement.result

Beschreibung

Die Eigenschaft result des Interfaces SVGFEMorphologyElement gibt das gleichnamige SVG-Attribut result eines <feMorphology>-Elements zurück. Über diesen Namen kann ein nachfolgendes Filterprimitiv im selben <filter> das Ergebnis per in oder in2 aufgreifen, etwa um einen verbreiterten Umriss (operator="dilate") mit der Originalgrafik zu kombinieren.

Die Eigenschaft selbst ist schreibgeschützt, der Wert ist aber ein SVGAnimatedString-Objekt. Dessen baseVal kannst du lesen und schreiben, und damit änderst du das Attribut im DOM. animVal liefert den aktuell animierten Wert, zum Beispiel während einer SMIL-Animation mit <set> oder <animate>.

Fehlt das Attribut, ist baseVal ein leerer String. Das Ergebnis des Primitivs ist dann nur implizit als Eingabe für das direkt folgende Primitiv verfügbar. Die Eigenschaft stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes und steht auf allen SVGFE*-Elementen genauso zur Verfügung.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, entspricht dem Attribut result) und animVal (nur lesbar, aktueller animierter Wert).

Beispiele

Ergebnisnamen auslesen

// <svg><filter id="outline"><feMorphology id="morph" operator="dilate" radius="2" in="SourceAlpha" result="dick"/></filter></svg>
const morph = document.getElementById('morph');
console.log(morph.result.baseVal);
console.log(morph.result.animVal);

dick dick

Umriss-Filter per Skript aufbauen und verknüpfen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const filter = document.createElementNS(NS, 'filter');
filter.id = 'kontur';

const morph = document.createElementNS(NS, 'feMorphology');
morph.setAttribute('in', 'SourceAlpha');
morph.setAttribute('operator', 'dilate');
morph.setAttribute('radius', '3');
morph.result.baseVal = 'verbreitert'; // setzt das Attribut result

const merge = document.createElementNS(NS, 'feMerge');
for (const quelle of [morph.result.baseVal, 'SourceGraphic']) {
  const node = document.createElementNS(NS, 'feMergeNode');
  node.setAttribute('in', quelle);
  merge.append(node);
}

filter.append(morph, merge);
svg.prepend(filter);
document.querySelector('text').setAttribute('filter', 'url(#kontur)');
console.log(morph.getAttribute('result'));

verbreitert

Fehlendes result-Attribut erkennen

const morph = document.createElementNS('http://www.w3.org/2000/svg', 'feMorphology');
const name = morph.result.baseVal || '(implizit)';
console.log(name);

(implizit)

// Wichtig · Fallstricke

Eine direkte Zuweisung wie morph.result = 'x' wird ignoriert (im Strict Mode gibt es einen TypeError). Setze den Wert immer über result.baseVal oder setAttribute('result', …).
Innerhalb eines <filter> sollten Ergebnisnamen eindeutig sein. Kommt ein Name doppelt vor, verweist in auf das zuletzt davor definierte Primitiv mit diesem Namen.
Verweist in auf einen Namen, den es nicht gibt, wird das je nach Browser als SourceGraphic oder als vorheriges Ergebnis behandelt. Das führt oft zu unerwarteten Darstellungen.
SVG-Elemente musst du mit createElementNS und dem SVG-Namensraum erzeugen, sonst gibt es die Eigenschaft nicht.
Große radius-Werte bei feMorphology kosten viel Rechenzeit. Das ist besonders bei animierten Filtern zu beachten.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGFEMorphologyElement SVGFEMorphologyElement.in1 SVGFEMorphologyElement.operator SVGFEMorphologyElement.radiusX SVGAnimatedString SVGFilterElement SpeechRecognitionEvent.results