Signatur
Beschreibung
Die Eigenschaft result des Interfaces SVGFEDropShadowElement gibt das SVG-Attribut result eines <feDropShadow>-Filterprimitivs zurück. Über diesen Namen können nachfolgende Filterprimitive innerhalb desselben <filter>-Elements über ihr in- oder in2-Attribut auf das erzeugte Schattenbild zugreifen, zum Beispiel in <feMerge> oder <feComposite>.
Der Rückgabewert ist kein einfacher String, sondern ein SVGAnimatedString-Objekt. Den aktuell gesetzten Attributwert liest und schreibt man über baseVal. animVal enthält den Wert, der sich gerade aus einer eventuellen SMIL-Animation ergibt, und kann nur gelesen werden.
Schreibgeschützt ist nur die Eigenschaft selbst: Man kann ihr kein neues Objekt zuweisen. Den Namen ändert man über element.result.baseVal = "neuerName" oder mit setAttribute("result", …). Das ist praktisch, wenn Filterketten dynamisch aufgebaut oder umverdrahtet werden sollen.
Rückgabewert
baseVal (lesbar und schreibbar, entspricht dem Attribut result) und animVal (nur lesbar, animierter Wert). Fehlt das Attribut, ist baseVal ein leerer String.Beispiele
Namen des Schatten-Ergebnisses auslesen
// <svg><filter id="schatten"><feDropShadow id="ds" dx="2" dy="2" stdDeviation="3" result="schattenBild"/></filter></svg>
const dropShadow = document.getElementById('ds');
console.log(dropShadow.result instanceof SVGAnimatedString);
console.log(dropShadow.result.baseVal);
console.log(dropShadow.result.animVal);Element per Skript erzeugen und in einer Filterkette weiterverwenden
const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'glow';
const shadow = document.createElementNS(SVG_NS, 'feDropShadow');
shadow.setAttribute('stdDeviation', '4');
shadow.setAttribute('flood-color', 'gold');
shadow.result.baseVal = 'leuchten'; // setzt das Attribut result
const merge = document.createElementNS(SVG_NS, 'feMerge');
for (const quelle of [shadow.result.baseVal, 'SourceGraphic']) {
const node = document.createElementNS(SVG_NS, 'feMergeNode');
node.setAttribute('in', quelle);
merge.append(node);
}
filter.append(shadow, merge);
document.querySelector('svg defs').append(filter);
console.log(shadow.getAttribute('result'));Fehlendes Attribut erkennen und Zuweisung an die Eigenschaft
const el = document.createElementNS('http://www.w3.org/2000/svg', 'feDropShadow');
console.log(JSON.stringify(el.result.baseVal));
// Eine direkte Zuweisung an die Eigenschaft hat keine Wirkung
el.result = 'x';
console.log(el.result instanceof SVGAnimatedString, el.getAttribute('result'));// Wichtig · Fallstricke
- Häufiger Fehler:
el.result = "name"tut nichts, weil die Eigenschaft schreibgeschützt ist. Im Strict Mode wirft die Zuweisung einenTypeError. Richtig istel.result.baseVal = "name". - Namen gelten nur innerhalb desselben
<filter>. Kommt ein Name mehrfach vor, verweisen späterein-Attribute auf das zuletzt davor definierte Ergebnis. - Verweist
inauf einen Namen, den es nicht gibt, nimmt der Browser das Ergebnis des vorherigen Primitivs (beim ersten PrimitivSourceGraphic). Es erscheint keine Fehlermeldung, was die Fehlersuche erschwert. - SVG-Elemente müssen mit
createElementNSund dem SVG-Namensraum erzeugt werden. Sonst gibt es keineresult-Eigenschaft. feDropShadowund damit dieses Interface werden in allen modernen Browsern unterstützt. Ältere Versionen von Edge (EdgeHTML) und der Internet Explorer kennen es nicht.