SVGFEGaussianBlurElement.stdDeviationY — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEGaussianBlurElement.stdDeviationY

Beschreibung

Die Eigenschaft stdDeviationY gehört zur Schnittstelle SVGFEGaussianBlurElement und steht für die vertikale Weichzeichnungsstärke eines <feGaussianBlur>-Filterprimitivs. Sie entspricht dem zweiten Wert des Attributs stdDeviation, zum Beispiel stdDeviation="2 8" → X = 2, Y = 8.

Enthält das Attribut nur einen Wert (z. B. stdDeviation="5"), gilt er für beide Achsen. stdDeviationY gibt dann automatisch denselben Wert zurück wie stdDeviationX. Fehlt das Attribut ganz, ist der Wert 0, es wird also nicht weichgezeichnet.

Die Eigenschaft selbst ist schreibgeschützt, anders als es die Kurzbeschreibung nahelegt. Sie liefert ein SVGAnimatedNumber-Objekt. Den Wert ändert man über dessen baseVal oder bequemer über setStdDeviation(x, y). Den aktuell angezeigten Wert, auch während einer SMIL-Animation, liest man über animVal. So lassen sich Effekte wie ein vertikaler Bewegungsunschärfe-Effekt dynamisch per JavaScript steuern.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Ein Objekt mit baseVal (Basiswert aus dem Attribut; beschreibbar) und animVal (aktueller, ggf. animierter Wert; nur lesbar). Beide sind vom Typ number.

Beispiele

Y-Komponente auslesen

// <svg><filter id="blur"><feGaussianBlur id="gb" stdDeviation="2 8"/></filter></svg>
const blur = document.getElementById('gb');

console.log(blur.stdDeviationX.baseVal); // horizontal
console.log(blur.stdDeviationY.baseVal); // vertikal

2 8

Nur ein Wert im Attribut – Y übernimmt X

const svgNS = 'http://www.w3.org/2000/svg';
const fe = document.createElementNS(svgNS, 'feGaussianBlur');
fe.setAttribute('stdDeviation', '5');

console.log(fe.stdDeviationY.baseVal);

5

Vertikale Unschärfe per Schieberegler steuern

// <input type="range" id="slider" min="0" max="20" value="0">
const blur = document.getElementById('gb');
const slider = document.getElementById('slider');

slider.addEventListener('input', () => {
  const y = Number(slider.value);
  // X-Wert beibehalten, nur Y ändern
  blur.setStdDeviation(blur.stdDeviationX.baseVal, y);
  console.log(`Y = ${blur.stdDeviationY.baseVal}`);
});

Y = 12 (je nach Reglerstellung)

Animierten Wert auslesen

// <feGaussianBlur id="gb" stdDeviation="0">
//   <animate attributeName="stdDeviation" from="0" to="10" dur="2s" repeatCount="indefinite"/>
// </feGaussianBlur>
const blur = document.getElementById('gb');

setInterval(() => {
  const { baseVal, animVal } = blur.stdDeviationY;
  console.log(`Basis: ${baseVal}, aktuell: ${animVal.toFixed(2)}`);
}, 500);

Basis: 0, aktuell: 2.51 Basis: 0, aktuell: 5.02 …

// Wichtig · Fallstricke

Schreibgeschützt: blur.stdDeviationY = 4 bewirkt nichts und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen blur.stdDeviationY.baseVal oder rufen Sie setStdDeviation(x, y) auf.
Wer baseVal direkt setzt, schreibt das Attribut stdDeviation neu. Hatte das Attribut vorher nur einen Wert, kann sich dadurch auch der X-Wert anders verhalten als erwartet. setStdDeviation setzt beide Werte ausdrücklich und ist daher die sicherere Wahl.
Negative Werte sind ungültig und schalten den Filtereffekt ab. Der Wert 0 schaltet die Weichzeichnung auf dieser Achse ab.
Leistung: Große Werte sind aufwendig zu berechnen, vor allem bei großen Filterbereichen und häufigen Änderungen, etwa in input- oder scroll-Handlern. Bei Bedarf drosseln oder requestAnimationFrame verwenden.
Kompatibilität: Wird von allen modernen Browsern unterstützt. animVal spiegelt SMIL-Animationen wider, CSS-Animationen dagegen nicht zuverlässig.

Siehe auch

SVGFEGaussianBlurElement SVGFEGaussianBlurElement.stdDeviationX SVGFEGaussianBlurElement.setStdDeviation() SVGAnimatedNumber SVGFilterElement