SVGFEDropShadowElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFEDropShadowElement extends SVGElement

Beschreibung

SVGFEDropShadowElement ist die DOM-Schnittstelle des Elements <feDropShadow> innerhalb eines <filter>. Das Primitiv fasst die klassische Kette feGaussianBlur → feOffset → feFlood → feComposite → feMerge in einem einzigen Element zusammen. Das Ergebnis ist die Eingabegrafik mit einem darunterliegenden Schatten.

Die Schnittstelle erbt von SVGElement und bindet die Standardattribute für Filterprimitive ein (x, y, width, height, result). Dazu kommen diese spezifischen Eigenschaften, alle nur lesbar und animierbar:

in1 (SVGAnimatedString): entspricht dem Attribut in, also der Eingabe des Primitivs, z. B. SourceGraphic.
dx, dy (SVGAnimatedNumber): horizontaler und vertikaler Versatz des Schattens. Standardwert ist jeweils 2.
stdDeviationX, stdDeviationY (SVGAnimatedNumber): Stärke der Weichzeichnung (Standardabweichung) je Achse. Standardwert ist 2.
Methode setStdDeviation(stdDeviationX, stdDeviationY): setzt beide Blur-Werte in einem Aufruf.

Die Schnittstelle ist nützlich, wenn du Schatten zur Laufzeit per JavaScript erzeugst oder änderst, etwa für Hover-Effekte, Themes oder Animationen. Einen eigenen Konstruktor gibt es nicht. Instanzen erzeugst du mit document.createElementNS('http://www.w3.org/2000/svg', 'feDropShadow'). Die aktuellen Werte liest und schreibst du über .baseVal. Mit .animVal liest du den Wert, der gerade durch eine SMIL-Animation gilt.

Parameter

Name	Typ	Default	Beschreibung
$stdDeviationX Pflicht	number		Parameter von `setStdDeviation()`: Weichzeichnung in x-Richtung, in Einheiten des Filterkoordinatensystems. Negative Werte sind ein Fehler, `0` schaltet die Weichzeichnung ab.
$stdDeviationY Pflicht	number		Parameter von `setStdDeviation()`: Weichzeichnung in y-Richtung.

Beispiele

Schatten-Filter per JavaScript erzeugen und anwenden

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

// <defs><filter id="schatten"><feDropShadow .../></filter></defs>
const defs = document.createElementNS(SVG_NS, 'defs');
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'schatten';

const shadow = document.createElementNS(SVG_NS, 'feDropShadow');
shadow.setAttribute('dx', '4');
shadow.setAttribute('dy', '4');
shadow.setAttribute('stdDeviation', '3');
shadow.setAttribute('flood-color', '#000');
shadow.setAttribute('flood-opacity', '0.4');

filter.append(shadow);
defs.append(filter);
svg.prepend(defs);

svg.querySelector('rect').setAttribute('filter', 'url(#schatten)');
console.log(shadow instanceof SVGFEDropShadowElement);

true

Werte über die animierten Eigenschaften lesen und ändern

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

console.log(shadow.dx.baseVal, shadow.dy.baseVal);
console.log(shadow.stdDeviationX.baseVal, shadow.stdDeviationY.baseVal);
console.log(shadow.in1.baseVal || '(leer = Ergebnis des vorherigen Primitivs)');

// Versatz ändern
shadow.dx.baseVal = 8;
shadow.dy.baseVal = 6;

// Beide Blur-Werte in einem Aufruf setzen
shadow.setStdDeviation(5, 5);
console.log(shadow.getAttribute('stdDeviation'));

4 4 3 3 (leer = Ergebnis des vorherigen Primitivs) 5 5

Karte beim Hover „anheben“

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

const setDepth = (depth) => {
  shadow.dy.baseVal = depth;
  shadow.setStdDeviation(depth * 0.8, depth * 0.8);
  shadow.setAttribute('flood-opacity', String(0.2 + depth * 0.03));
};

card.addEventListener('mouseenter', () => setDepth(10));
card.addEventListener('mouseleave', () => setDepth(3));
setDepth(3);

// Wichtig · Fallstricke

Kein Konstruktor: new SVGFEDropShadowElement() wirft einen TypeError. Verwende immer createElementNS mit dem SVG-Namensraum. Ein Aufruf von document.createElement('feDropShadow') erzeugt nur ein unbekanntes HTML-Element.
Farbe und Deckkraft sind keine Eigenschaften der Schnittstelle. flood-color und flood-opacity setzt du per setAttribute() oder CSS (shadow.style.floodColor).
Namensfalle: Das Attribut in heißt in der Schnittstelle in1, weil in in JavaScript ein reserviertes Wort ist.
Abgeschnittene Schatten: Die Filterregion ist standardmäßig nur 10 % größer als das Element. Bei großen dx/dy- oder Blur-Werten vergrößerst du sie über x, y, width und height am <filter>.
Performance: Große stdDeviation-Werte und Animationen in jedem Frame kosten viel Rechenzeit. Für reine HTML-Elemente ist CSS filter: drop-shadow() oder box-shadow oft effizienter.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, im Internet Explorer und im alten EdgeHTML-Edge jedoch nicht. Als Rückfall dient dort die Kette aus feGaussianBlur, feOffset und feMerge.

Siehe auch

SVGFEFloodElement SVGFEMorphologyElement SVGDiscardElement SVGEllipseElement SVGFEBlendElement