SVGFEDropShadowElement.stdDeviationX — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.stdDeviationX

Beschreibung

Die Eigenschaft stdDeviationX der Schnittstelle SVGFEDropShadowElement steht für die horizontale Standardabweichung des Gaußschen Weichzeichners, mit dem der Schlagschatten eines <feDropShadow>-Filterprimitivs weichgezeichnet wird. Je größer der Wert, desto weicher und breiter läuft der Schatten in X-Richtung aus.

Das Attribut stdDeviation kann eine oder zwei Zahlen enthalten. Bei zwei Werten (z. B. stdDeviation="4 1") ist der erste die X-Komponente. Bei nur einem Wert gilt er für beide Achsen, stdDeviationX und stdDeviationY liefern dann denselben Wert. Fehlt das Attribut, ist der Standardwert 2.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Sie gibt aber ein SVGAnimatedNumber-Objekt zurück. Dessen baseVal lässt sich lesen und auch schreiben. animVal enthält den aktuellen, möglicherweise durch SMIL-Animation veränderten Wert. Um beide Komponenten gleichzeitig zu setzen, ist die Methode setStdDeviation(x, y) der richtige Weg.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Basiswert, schreibbar) und animVal (aktueller animierter Wert, nur lesbar) für die horizontale Standardabweichung.

Beispiele

X-Unschärfe eines Schlagschattens auslesen

// <svg><filter id="shadow"><feDropShadow stdDeviation="6 2" dx="3" dy="3"/></filter></svg>
const shadow = document.querySelector('#shadow feDropShadow');

console.log(shadow.stdDeviationX.baseVal);
console.log(shadow.stdDeviationY.baseVal);

6 2

Nur ein Wert im Attribut: gilt für beide Achsen

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

console.log(drop.stdDeviationX.baseVal, drop.stdDeviationY.baseVal);

4 4

Schattenunschärfe per Schieberegler steuern

// <input type="range" id="blur" min="0" max="20" value="2">
const drop = document.querySelector('#shadow feDropShadow');
const slider = document.querySelector('#blur');

slider.addEventListener('input', () => {
  const x = Number(slider.value);
  // Beide Komponenten gleichzeitig setzen; Y bleibt bei der Hälfte
  drop.setStdDeviation(x, x / 2);
  console.log(`X: ${drop.stdDeviationX.baseVal}, Attribut: ${drop.getAttribute('stdDeviation')}`);
});

X: 10, Attribut: 10 5

Nur die X-Komponente über baseVal ändern

const drop = document.querySelector('#shadow feDropShadow');
drop.stdDeviationX.baseVal = 8; // Zuweisung an baseVal ist erlaubt

console.log(drop.getAttribute('stdDeviation'));

8 2

// Wichtig · Fallstricke

Schreibgeschützt: drop.stdDeviationX = 5 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen stdDeviationX.baseVal, rufen Sie setStdDeviation(x, y) auf oder setzen Sie das Attribut mit setAttribute('stdDeviation', …).
Negative Werte sind ein Fehler und schalten das Filterprimitiv ab. Der Wert 0 in einer Achse schaltet dort die Unschärfe ab.
Der Wert wird im Koordinatensystem von primitiveUnits des Filters interpretiert, standardmäßig also in Benutzereinheiten. Bei primitiveUnits="objectBoundingBox" sind es Bruchteile der Objektgröße.
animVal weicht nur während einer SMIL-Animation von baseVal ab. CSS-Animationen wirken sich hier nicht aus.
Große Unschärfe-Werte auf großen Flächen kosten beim Rendern viel Leistung. Das gilt besonders, wenn sie in Animationen laufend geändert werden.
Die Unterstützung ist gut: Alle modernen Browser unterstützen <feDropShadow> und diese Eigenschaft. Der Internet Explorer unterstützt sie nicht.

Siehe auch

SVGFEDropShadowElement SVGFEDropShadowElement.stdDeviationY SVGFEDropShadowElement.setStdDeviation() SVGFEDropShadowElement.dx SVGAnimatedNumber SVGFEGaussianBlurElement.stdDeviationX