Signatur
Beschreibung
Die Methode setStdDeviation() des Interfaces SVGFEDropShadowElement legt fest, wie stark der Schlagschatten eines <feDropShadow>-Filterprimitivs weichgezeichnet wird. Sie schreibt dazu das Attribut stdDeviation. Die beiden Werte bestimmen die Standardabweichung der Gaußschen Weichzeichnung entlang der X- und der Y-Achse.
Sinnvoll ist die Methode immer dann, wenn sich die Weichheit eines Schattens zur Laufzeit ändern soll, etwa bei Hover-Effekten, Animationen oder wenn Nutzer den Wert per Schieberegler einstellen. Gegenüber setAttribute('stdDeviation', '…') übergibt man hier direkt Zahlen und muss keine Zeichenkette zusammenbauen.
Die aktuellen Werte liest man über die animierbaren Eigenschaften stdDeviationX und stdDeviationY aus, jeweils vom Typ SVGAnimatedNumber, z. B. el.stdDeviationX.baseVal. Beide Werte werden im Koordinatensystem angegeben, das durch primitiveUnits des umgebenden <filter> festgelegt ist.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $stdDeviationX Pflicht | number | Standardabweichung der Weichzeichnung in X-Richtung. 0 schaltet die Weichzeichnung in dieser Richtung ab. |
|
| $stdDeviationY Pflicht | number | Standardabweichung der Weichzeichnung in Y-Richtung. Für eine gleichmäßige Weichzeichnung denselben Wert wie bei stdDeviationX übergeben. |
Rückgabewert
undefined).Beispiele
Schatten-Weichzeichnung per Skript setzen
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '120');
const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'schatten';
const shadow = document.createElementNS(svgNS, 'feDropShadow');
shadow.setAttribute('dx', '4');
shadow.setAttribute('dy', '4');
shadow.setStdDeviation(3, 3);
filter.append(shadow);
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('x', '20');
rect.setAttribute('y', '20');
rect.setAttribute('width', '120');
rect.setAttribute('height', '60');
rect.setAttribute('fill', 'steelblue');
rect.setAttribute('filter', 'url(#schatten)');
svg.append(filter, rect);
document.body.append(svg);
console.log(shadow.getAttribute('stdDeviation'));
console.log(shadow.stdDeviationX.baseVal, shadow.stdDeviationY.baseVal);Schatten-Weichheit per Schieberegler steuern
// HTML: <input type="range" id="blur" min="0" max="20" value="2">
// <svg>…<feDropShadow id="ds" dx="3" dy="3" stdDeviation="2"/>…</svg>
const slider = document.querySelector('#blur');
const dropShadow = document.querySelector('#ds');
slider.addEventListener('input', () => {
const wert = Number(slider.value);
dropShadow.setStdDeviation(wert, wert);
});Richtungsabhängige Weichzeichnung (Bewegungsunschärfe)
const ds = document.querySelector('feDropShadow');
// Stark horizontal, kaum vertikal weichzeichnen
ds.setStdDeviation(10, 1);
console.log(`X: ${ds.stdDeviationX.baseVal}, Y: ${ds.stdDeviationY.baseVal}`);// Wichtig · Fallstricke
- Beide Argumente angeben: Laut Spezifikation sind beide Parameter Pflicht. Wer nur einen Wert übergibt, bekommt je nach Browser einen
TypeErroroder ein unerwartetes Ergebnis. Für eine gleichmäßige Weichzeichnung also denselben Wert zweimal übergeben. - Negative Werte sind ein Fehler. Der Filter wird dann nicht wie gewünscht gerendert, in manchen Browsern wird das Element sogar ausgeblendet.
0ist erlaubt und ergibt einen harten Schatten. - Nur Basiswert: Die Methode ändert den Basiswert. Läuft gleichzeitig eine SMIL-Animation (
<animate attributeName=\"stdDeviation\">), bestimmt sie den angezeigten Wert (animVal). - Leistung: Große Werte sind beim Rendern teuer. Werden sie bei jedem Frame geändert (z. B. in
requestAnimationFrame), kann es auf schwächeren Geräten ruckeln. - Kompatibilität:
<feDropShadow>undsetStdDeviation()werden in allen aktuellen Browsern unterstützt, nicht aber im Internet Explorer. Als Ausweichlösung dient dort eine Kombination ausfeGaussianBlur,feOffsetundfeMerge.