Signatur
Beschreibung
Die Eigenschaft dx der Schnittstelle SVGFEDropShadowElement spiegelt das gleichnamige Attribut des SVG-Filterprimitivs <feDropShadow> wider. Sie gibt an, um wie viele Einheiten der Schlagschatten horizontal gegenüber der Quellgrafik verschoben wird. Positive Werte schieben den Schatten nach rechts, negative nach links.
Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedNumber-Objekt. Über baseVal liest und setzt man den im Attribut hinterlegten Grundwert, animVal liefert den aktuellen Wert, der gerade gilt, auch während einer SMIL-Animation (z. B. <animate attributeName="dx">). Die Eigenschaft selbst ist schreibgeschützt, baseVal lässt sich aber ändern.
Einsetzen lässt sich das z. B. für dynamische Schatteneffekte: Abhängig von der Mausposition oder einer simulierten Lichtquelle wird der Schattenversatz per Skript angepasst, ohne das Attribut als Zeichenkette parsen zu müssen. In welchem Koordinatensystem der Wert gilt, bestimmt das Attribut primitiveUnits des umgebenden <filter>-Elements (Standard: userSpaceOnUse).
Rückgabewert
baseVal (Grundwert aus dem Attribut dx, beschreibbar) und animVal (aktueller, ggf. animierter Wert, nur lesbar). Fehlt das Attribut, ist der Standardwert 2.Beispiele
Horizontalen Schattenversatz auslesen
// <svg><filter id="schatten"><feDropShadow id="ds" dx="4" dy="6" stdDeviation="2"/></filter></svg>
const ds = document.getElementById('ds');
console.log(ds.dx.baseVal);
console.log(ds.dx.animVal);
console.log(ds.dx instanceof SVGAnimatedNumber);Schattenversatz per Skript ändern
const ds = document.querySelector('#schatten feDropShadow');
// baseVal ist beschreibbar, das Attribut wird automatisch aktualisiert
ds.dx.baseVal = -8;
console.log(ds.getAttribute('dx'));
// dx selbst ist schreibgeschützt – die Zuweisung hat keine Wirkung
ds.dx = 10;
console.log(ds.dx.baseVal);Schatten folgt der Mausposition (Lichtquelle simulieren)
const svg = document.querySelector('svg');
const ds = svg.querySelector('feDropShadow');
svg.addEventListener('pointermove', (event) => {
const rect = svg.getBoundingClientRect();
const mitteX = rect.left + rect.width / 2;
// Schatten fällt von der „Lichtquelle“ (Maus) weg, begrenzt auf ±10
const versatz = Math.max(-10, Math.min(10, (mitteX - event.clientX) / 20));
ds.dx.baseVal = versatz;
});Aktuellen animierten Wert abfragen
// <feDropShadow id="ds" dx="0" dy="3">
// <animate attributeName="dx" from="0" to="10" dur="2s" repeatCount="indefinite"/>
// </feDropShadow>
const ds = document.getElementById('ds');
setTimeout(() => {
console.log('Grundwert:', ds.dx.baseVal);
console.log('Animiert:', ds.dx.animVal.toFixed(1));
}, 1000);// Wichtig · Fallstricke
- Schreibgeschützt: Wenn man
element.dxdirekt etwas zuweist, passiert im nicht-strikten Modus stillschweigend nichts. Im strikten Modus (z. B. in ES-Modulen) wirft die Zuweisung einenTypeError. Ändern Sie stattdessendx.baseValoder rufen SiesetAttribute('dx', …)auf. - Standardwert: Fehlt das Attribut, gilt
2und nicht0. Wer keinen horizontalen Versatz möchte, mussdx="0"ausdrücklich setzen. - Einheiten: Der Wert hat keine Einheit. Wie er ausgelegt wird, hängt von
primitiveUnitsam<filter>ab. BeiobjectBoundingBoxist er ein Bruchteil der Breite des Elements (z. B.0.05). - animVal: Viele Browser liefern während einer SMIL-Animation in
animValnicht verlässlich den animierten Wert, sondern denselben Wert wiebaseVal. Für CSS-Animationen giltanimValnicht. - Kompatibilität:
<feDropShadow>undSVGFEDropShadowElementwerden von allen aktuellen Browsern unterstützt, nicht aber vom Internet Explorer. Dort lässt sich der Effekt mitfeGaussianBlurundfeOffsetnachbauen. - Leistung: Wenn
dxhäufig geändert wird (z. B. beipointermove), muss der Filter jedes Mal neu berechnet werden. Bei großen Flächen sollten Sie die Aktualisierung mitrequestAnimationFramedrosseln.