SVGFEDropShadowElement.dy — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.dy

Beschreibung

Die Eigenschaft dy der Schnittstelle SVGFEDropShadowElement spiegelt das Attribut dy des zugehörigen <feDropShadow>-Filterprimitivs wider. Das Attribut gibt an, um wie weit der Schlagschatten vertikal gegenüber der Quellgrafik verschoben wird. Positive Werte verschieben den Schatten nach unten, negative nach oben.

Zurückgegeben wird ein SVGAnimatedNumber-Objekt. Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über dy.baseVal ändern. dy.animVal liefert den aktuell wirksamen Wert, auch während einer SMIL-Animation (z. B. mit <animate>).

Ist das Attribut nicht gesetzt, gilt der Standardwert 2. Die Einheit richtet sich nach dem Attribut primitiveUnits des übergeordneten <filter>-Elements (standardmäßig userSpaceOnUse, also Benutzerkoordinaten). Die Eigenschaft eignet sich, um Schatten dynamisch per JavaScript anzupassen, etwa abhängig von Mausposition oder Scroll-Fortschritt.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (änderbarer Grundwert, number) und animVal (schreibgeschützter, aktuell animierter Wert, number). Standardwert ist 2.

Beispiele

Vertikalen Schattenversatz auslesen

// <svg><filter id="schatten"><feDropShadow id="ds" dx="4" dy="6" stdDeviation="2"/></filter></svg>
const shadow = document.getElementById('ds');

console.log(shadow.dy.baseVal);
console.log(shadow.dy.animVal);

6 6

Standardwert bei fehlendem Attribut

const svgNS = 'http://www.w3.org/2000/svg';
const ds = document.createElementNS(svgNS, 'feDropShadow');

// Kein dy-Attribut gesetzt → Standardwert
console.log(ds.dy.baseVal);
console.log(ds.hasAttribute('dy'));

2 false

Schatten abhängig von der Mausposition verschieben

const shadow = document.querySelector('#schatten feDropShadow');

document.addEventListener('pointermove', (event) => {
  // Mausposition relativ zur Fenstermitte, begrenzt auf ±10
  const offset = (event.clientY - window.innerHeight / 2) / 40;
  const clamped = Math.max(-10, Math.min(10, offset));

  // baseVal ist änderbar und aktualisiert das Attribut
  shadow.dy.baseVal = -clamped;
  shadow.dx.baseVal = 0;
});

baseVal setzen und Attribut prüfen

const ds = document.querySelector('feDropShadow');
ds.dy.baseVal = 12;

console.log(ds.getAttribute('dy'));

// Umgekehrt: Attribut ändern wirkt auf baseVal
ds.setAttribute('dy', '-3');
console.log(ds.dy.baseVal);

12 -3

// Wichtig · Fallstricke

Schreibgeschützt: ds.dy = 5 hat keine Wirkung (im strikten Modus ggf. TypeError). Immer ds.dy.baseVal = 5 verwenden.
Einheiten: Bei primitiveUnits="objectBoundingBox" am <filter> wird dy als Bruchteil der Objekthöhe interpretiert – ein Wert wie 6 verschiebt dann um das Sechsfache der Höhe.
Filterregion: Große Versatzwerte können den Schatten aus der Filterregion schieben, sodass er abgeschnitten wird. Ggf. y/height des <filter> vergrößern.
animVal ist nur lesbar; in manchen Browsern spiegelt er SMIL-Animationen nicht exakt wider und entspricht dann baseVal.
Für einfache HTML-Schatten ist die CSS-Funktion filter: drop-shadow() oft die einfachere Alternative. <feDropShadow> wird von Internet Explorer und dem alten EdgeHTML nicht unterstützt.

Siehe auch

SVGFEDropShadowElement SVGFEDropShadowElement.dx SVGFEDropShadowElement.stdDeviationY SVGFEDropShadowElement.setStdDeviation() SVGAnimatedNumber SVGFEOffsetElement.dy WorkerGlobalScope.trustedTypes