Signatur
Beschreibung
Die schreibgeschützte Eigenschaft result der Schnittstelle SVGFESpecularLightingElement spiegelt das SVG-Attribut result des Elements <feSpecularLighting> wider. Dieses Attribut gibt dem Ergebnis des Filterprimitivs einen Namen, über den nachfolgende Primitive in derselben <filter>-Kette per in- oder in2-Attribut darauf zugreifen können.
Der Wert ist ein SVGAnimatedString-Objekt mit zwei Eigenschaften: baseVal enthält den im Markup bzw. per Skript gesetzten Grundwert und ist beschreibbar; animVal enthält den aktuellen, ggf. durch SMIL-Animation veränderten Wert und ist nur lesbar.
Typische Einsatzfälle sind das Auslesen der Filterkette zur Fehlersuche, das dynamische Umbenennen von Zwischenergebnissen oder das programmatische Zusammensetzen von Lichteffekten, etwa wenn das Glanzlicht per <feComposite> mit der Ursprungsgrafik kombiniert werden soll.
Rückgabewert
baseVal (beschreibbarer Grundwert des Attributs result) und animVal (aktueller, animierter Wert). Ist kein Attribut gesetzt, ist baseVal ein leerer String.Beispiele
Namen des Filterergebnisses auslesen
// SVG im Dokument:
// <svg width="200" height="200">
// <filter id="glanz">
// <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
// <feSpecularLighting in="blur" surfaceScale="5" specularExponent="20" result="spec">
// <fePointLight x="-50" y="-100" z="200" />
// </feSpecularLighting>
// <feComposite in="spec" in2="SourceAlpha" operator="in" />
// </filter>
// </svg>
const spec = document.querySelector('feSpecularLighting');
console.log(spec.result.baseVal);
console.log(spec.result.animVal);Ergebnis umbenennen und Verweise nachziehen
const spec = document.querySelector('#glanz feSpecularLighting');
const oldName = spec.result.baseVal;
const newName = 'glanzlicht';
// Namen ändern – setzt das Attribut result
spec.result.baseVal = newName;
// Alle Primitive, die auf den alten Namen verweisen, anpassen
document.querySelectorAll('#glanz [in], #glanz [in2]').forEach((el) => {
for (const attr of ['in', 'in2']) {
if (el.getAttribute(attr) === oldName) el.setAttribute(attr, newName);
}
});
console.log(spec.getAttribute('result'));Filterprimitiv dynamisch erzeugen
const NS = 'http://www.w3.org/2000/svg';
const filter = document.querySelector('filter#glanz');
const spec = document.createElementNS(NS, 'feSpecularLighting');
spec.setAttribute('in', 'SourceAlpha');
spec.setAttribute('specularExponent', '30');
spec.result.baseVal = 'licht2';
const light = document.createElementNS(NS, 'feDistantLight');
light.setAttribute('azimuth', '45');
light.setAttribute('elevation', '60');
spec.append(light);
filter.append(spec);
console.log(spec instanceof SVGFESpecularLightingElement, spec.result.baseVal);// Wichtig · Fallstricke
- Die Eigenschaft
resultselbst ist schreibgeschützt – eine Zuweisung wiespec.result = 'x'wird ignoriert (im Strict ModeTypeError). Ändern Sie stattdessenresult.baseValoder nutzen SiesetAttribute('result', …). animValist nur lesbar; ohne laufende Animation entspricht erbaseVal.- Ein Umbenennen aktualisiert nicht automatisch die
in/in2-Verweise anderer Primitive. Verweist ein Primitiv auf einen nicht existierenden Namen, verwenden Browser meist das Ergebnis des vorherigen Primitivs bzw.SourceGraphic– das führt zu schwer auffindbaren Darstellungsfehlern. - Namen gelten nur innerhalb desselben
<filter>. Bei doppelten Namen gewinnt das zuletzt davor definierte Primitiv. - Elemente müssen mit
document.createElementNS()im SVG-Namensraum erzeugt werden, sonst existiert die Eigenschaft nicht. - Kompatibilität: Von allen aktuellen Browsern unterstützt (Chrome, Firefox, Safari, Edge).