SVGFEDiffuseLightingElement.result — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDiffuseLightingElement.result

Beschreibung

Die Eigenschaft result gibt das result-Attribut eines <feDiffuseLighting>-Elements zurück. Dieses Attribut gibt dem Ergebnis des Filterprimitivs einen Namen. Nachfolgende Primitive im selben <filter> können das Ergebnis dann über ihr in- oder in2-Attribut ansprechen, zum Beispiel um das Beleuchtungsergebnis mit <feComposite> mit der Originalgrafik zu verrechnen.

Der Rückgabewert ist ein SVGAnimatedString. Mit baseVal liest und setzt man den im Markup hinterlegten Wert. animVal enthält den aktuell gültigen Wert, der sich durch SMIL-Animationen unterscheiden kann. Die Eigenschaft result selbst ist schreibgeschützt. Den Namen ändert man über result.baseVal oder mit setAttribute("result", …).

Gebraucht wird die Eigenschaft vor allem, wenn man Filterketten dynamisch aufbaut oder untersucht, etwa in Editoren oder bei per JavaScript erzeugten Beleuchtungseffekten. Die Eigenschaft stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes und ist deshalb bei allen fe*-Elementen gleich.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (beschreibbar, Wert des Attributs) und animVal (nur lesbar, aktuell animierter Wert). Ohne Attribut sind beide ein leerer String "".

Beispiele

Ergebnisnamen auslesen

// <svg><filter id="licht"><feDiffuseLighting id="diffus" in="SourceGraphic" result="beleuchtet"><feDistantLight azimuth="45" elevation="60"/></feDiffuseLighting></filter></svg>
const fe = document.getElementById('diffus');
console.log(fe.result.baseVal);
console.log(fe.result.animVal);

beleuchtet beleuchtet

Filterkette dynamisch aufbauen und verknüpfen

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

const diffuse = document.createElementNS(NS, 'feDiffuseLighting');
diffuse.setAttribute('in', 'SourceAlpha');
diffuse.setAttribute('surfaceScale', '3');
diffuse.result.baseVal = 'licht'; // Namen per SVGAnimatedString setzen

const quelle = document.createElementNS(NS, 'fePointLight');
quelle.setAttribute('x', '50');
quelle.setAttribute('y', '20');
quelle.setAttribute('z', '80');
diffuse.append(quelle);

const composite = document.createElementNS(NS, 'feComposite');
composite.setAttribute('in', 'SourceGraphic');
composite.setAttribute('in2', diffuse.result.baseVal);
composite.setAttribute('operator', 'arithmetic');
composite.setAttribute('k1', '1');

filter.append(diffuse, composite);
document.querySelector('svg defs').append(filter);
console.log(diffuse.getAttribute('result'));

licht

Fehlendes result-Attribut erkennen

const fe = document.createElementNS('http://www.w3.org/2000/svg', 'feDiffuseLighting');
const name = fe.result.baseVal || '(unbenannt – nur implizit für das nächste Primitiv nutzbar)';
console.log(name);

(unbenannt – nur implizit für das nächste Primitiv nutzbar)

// Wichtig · Fallstricke

Nicht direkt zuweisen: fe.result = 'x' hat keine Wirkung und wirft im Strict Mode einen TypeError. Verwende stattdessen fe.result.baseVal = 'x'.
Fehlt result, geht die Ausgabe nur implizit an das direkt folgende Primitiv. Soll das Ergebnis später noch einmal verwendet werden, braucht es einen Namen.
Gibt es denselben Namen mehrmals im Filter, bezieht sich in/in2 auf das zuletzt davor definierte Primitiv mit diesem Namen.
Namen wirken nur innerhalb desselben <filter>-Elements, nicht dokumentweit.
Die Eigenschaft wird von allen modernen Browsern unterstützt. SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst gibt es die Eigenschaft nicht.

Siehe auch

SVGFEDiffuseLightingElement SVGFEDiffuseLightingElement.in1 SVGAnimatedString SVGFESpecularLightingElement.result SVGFECompositeElement SVGFETileElement.result