Signatur
Beschreibung
Die Eigenschaft stdDeviationX gehört zur Schnittstelle SVGFEGaussianBlurElement und steht für die horizontale Standardabweichung des Gaußschen Weichzeichners. Sie ist die Entsprechung des ersten Werts im Attribut stdDeviation eines <feGaussianBlur>-Filterprimitivs. Je größer der Wert, desto stärker wird in X-Richtung weichgezeichnet.
Die Eigenschaft selbst ist schreibgeschützt, du bekommst also kein einfaches number zurück, sondern ein SVGAnimatedNumber-Objekt. Darin gibt es zwei Werte:
baseVal: der Grundwert aus dem Attribut. Den kannst du lesen und in modernen Browsern auch setzen.animVal: der aktuelle Wert, falls gerade eine SMIL-Animation (z. B.<animate>) läuft. Ohne Animation ist er gleichbaseVal.
Steht im Attribut stdDeviation nur ein einziger Wert (z. B. stdDeviation="4"), gilt er für beide Achsen. Dann liefern stdDeviationX und stdDeviationY denselben Wert. Fehlt das Attribut ganz, ist der Wert 0. Das Gegenstück für die vertikale Richtung ist stdDeviationY. Beide Achsen auf einmal setzt du am einfachsten mit setStdDeviation(x, y).
Brauchbar ist die Eigenschaft, wenn du Filterwerte per Skript auslesen willst, etwa für Regler in einer Oberfläche, für Animationen mit requestAnimationFrame oder für Bewegungsunschärfe nur in eine Richtung.
Rückgabewert
baseVal (Grundwert aus dem Attribut) und animVal (aktueller, eventuell animierter Wert). Beide sind vom Typ number. Ist kein Attribut gesetzt, sind beide 0.Beispiele
X-Weichzeichnung auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const blur = document.createElementNS(svgNS, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '6 2');
console.log(blur.stdDeviationX.baseVal); // horizontal
console.log(blur.stdDeviationY.baseVal); // vertikal
// Nur ein Wert: gilt für beide Achsen
blur.setAttribute('stdDeviation', '3');
console.log(blur.stdDeviationX.baseVal, blur.stdDeviationY.baseVal);Horizontale Bewegungsunschärfe mit einem Regler steuern
// HTML: <svg width="0" height="0"><filter id="motion"><feGaussianBlur id="blur" stdDeviation="0 0"/></filter></svg>
// <img src="auto.jpg" style="filter:url(#motion)">
// <input type="range" id="regler" min="0" max="20" value="0">
const blur = document.getElementById('blur');
const regler = document.getElementById('regler');
regler.addEventListener('input', () => {
const x = Number(regler.value);
// Beide Achsen setzen, Y bleibt 0
blur.setStdDeviation(x, 0);
console.log('X-Unschärfe:', blur.stdDeviationX.baseVal);
});baseVal und animVal bei einer SMIL-Animation vergleichen
// HTML:
// <filter id="f"><feGaussianBlur id="blur" stdDeviation="1">
// <animate attributeName="stdDeviation" from="1" to="10" dur="2s" repeatCount="indefinite"/>
// </feGaussianBlur></filter>
const blur = document.getElementById('blur');
setInterval(() => {
const { baseVal, animVal } = blur.stdDeviationX;
console.log(`Basis: ${baseVal}, animiert: ${animVal.toFixed(2)}`);
}, 500);// Wichtig · Fallstricke
- Kein direktes Zuweisen:
blur.stdDeviationX = 5hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Du musstblur.stdDeviationX.baseVal = 5,setStdDeviation(x, y)odersetAttribute('stdDeviation', '5 0')verwenden. - animVal ist nur lesbar. Um animierte Werte zu verändern, änderst du die Animation selbst oder den Grundwert
baseVal. - Ein Wert im Attribut gilt für beide Achsen. Setzt du nur
stdDeviationX.baseVal, schreibt der Browser das Attribut als zwei Werte neu. Setzt du danachstdDeviationmit nur einem Wert, wird auch Y überschrieben. - Negative Werte sind ein Fehler: Das Filterprimitiv wird dann deaktiviert. Beim Wert
0gibt es in dieser Richtung keine Weichzeichnung. - Leistung: Große Werte kosten beim Rendern viel Zeit, besonders auf großen Flächen oder wenn du sie bei jedem Frame änderst.
- Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. SMIL-Animationen (
animVal) funktionieren in Chrome, Firefox und Safari, im alten Internet Explorer/Edge-Legacy aber nicht.