SVGFEDropShadowElement.stdDeviationY — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDropShadowElement.stdDeviationY

Beschreibung

Die schreibgeschützte Eigenschaft stdDeviationY des Interfaces SVGFEDropShadowElement gibt die vertikale Standardabweichung des Gaußschen Weichzeichners zurück, mit dem der Schatten eines <feDropShadow>-Filterprimitivs erzeugt wird. Grundlage ist das Attribut stdDeviation, das eine oder zwei Zahlen enthalten kann.

Enthält stdDeviation zwei Werte (z. B. "4 8"), entspricht stdDeviationY dem zweiten Wert. Ist nur ein Wert angegeben, gilt er für beide Achsen, stdDeviationY hat dann also denselben Wert wie stdDeviationX. Fehlt das Attribut, ist der Standardwert 2.

Die Eigenschaft selbst lässt sich nicht neu zuweisen. Sie liefert ein SVGAnimatedNumber-Objekt: baseVal enthält den Wert aus dem Attribut, animVal den aktuellen Wert während einer SMIL-Animation. Zum Ändern verwendest du die Methode setStdDeviation(x, y) oder setAttribute("stdDeviation", …).

Brauchen kannst du die Eigenschaft zum Beispiel, um Schattenparameter auszulesen, einen Filter-Editor mit den aktuellen Werten zu füllen oder Unschärfewerte für Berechnungen wie Bounding-Box-Puffer zu ermitteln.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Grundwert aus dem Attribut, number) und animVal (aktuell animierter Wert, schreibgeschützt).

Beispiele

Y-Komponente bei zwei Werten auslesen

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

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

4 8

Ein Wert gilt für beide Achsen, Standardwert ohne Attribut

const svgNS = 'http://www.w3.org/2000/svg';
const a = document.createElementNS(svgNS, 'feDropShadow');
a.setAttribute('stdDeviation', '5');
console.log(a.stdDeviationY.baseVal); // übernimmt X-Wert

const b = document.createElementNS(svgNS, 'feDropShadow');
console.log(b.stdDeviationY.baseVal); // Standardwert

5 2

Vertikale Unschärfe per Schieberegler ändern

// <svg><filter id="schatten"><feDropShadow id="ds" dx="2" dy="4" stdDeviation="2 2"/></filter></svg>
// <input type="range" id="blurY" min="0" max="20">
const ds = document.getElementById('ds');
const slider = document.getElementById('blurY');

slider.value = ds.stdDeviationY.baseVal;

slider.addEventListener('input', () => {
  const x = ds.stdDeviationX.baseVal;
  ds.setStdDeviation(x, Number(slider.value));
  console.log('Neue Y-Unschärfe:', ds.stdDeviationY.baseVal);
});

Neue Y-Unschärfe: 12 (bei Reglerwert 12)

// Wichtig · Fallstricke

Die Eigenschaft selbst ist schreibgeschützt. shadow.stdDeviationY = 5 wird stillschweigend ignoriert und wirft im Strict Mode einen TypeError. Ändern kannst du den Wert mit setStdDeviation(x, y) oder setAttribute('stdDeviation', …).
Negative Werte in stdDeviation sind ein Fehler: Der Filter wird dann je nach Browser deaktiviert oder nicht angewendet. Beim Wert 0 entsteht auf dieser Achse keine Unschärfe.
Zu hohe Werte kosten beim Rendern viel Leistung, besonders bei großen Flächen oder bei Animationen.
animVal unterscheidet sich nur während einer SMIL-Animation von baseVal. CSS-Filterfunktionen wie drop-shadow() wirken sich darauf nicht aus.
Browserunterstützung: in allen aktuellen Browsern vorhanden. Der Internet Explorer unterstützt <feDropShadow> nicht.

Siehe auch

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