Signatur
Beschreibung
Die Eigenschaft radiusY der Schnittstelle SVGFEMorphologyElement gibt ein SVGAnimatedNumber-Objekt zurück. Es steht für den vertikalen Radius des Filterprimitivs <feMorphology>. Das Primitiv macht Grafiken dicker (operator="dilate") oder dünner (operator="erode").
Im Attribut radius stehen ein oder zwei Zahlen. Bei zwei Werten (radius="3 6") ist der erste der X-Radius und der zweite der Y-Radius. Steht dort nur ein Wert, gilt er für beide Achsen, und radiusY hat dann denselben Wert wie radiusX. Fehlt das Attribut, ist der Wert 0. Das Primitiv ist dann wirkungslos.
Schreibgeschützt ist nur die Eigenschaft selbst, also der Verweis auf das SVGAnimatedNumber-Objekt. Über radiusY.baseVal kann man den Grundwert lesen und auch setzen. radiusY.animVal liefert den Wert, der gerade gilt, einschließlich laufender SMIL-Animationen. So lassen sich Filter in JavaScript auswerten oder zur Laufzeit anpassen, etwa für Hover-Effekte oder Animationen.
Rückgabewert
baseVal (Grundwert, beschreibbar) und animVal (aktuell geltender, animierter Wert, nur lesbar). Beide sind vom Typ number.Beispiele
Y-Radius auslesen
// <svg><filter id="f"><feMorphology id="morph" operator="dilate" radius="2 5"/></filter></svg>
const morph = document.getElementById('morph');
console.log(morph.radiusX.baseVal);
console.log(morph.radiusY.baseVal);Nur ein Wert im radius-Attribut
const svgNS = 'http://www.w3.org/2000/svg';
const morph = document.createElementNS(svgNS, 'feMorphology');
morph.setAttribute('radius', '4');
console.log(morph.radiusY.baseVal); // gleicher Wert wie radiusX
morph.removeAttribute('radius');
console.log(morph.radiusY.baseVal); // StandardwertVertikalen Radius mit einem Schieberegler steuern
// <input type="range" id="slider" min="0" max="10" value="0">
const morph = document.querySelector('feMorphology');
const slider = document.getElementById('slider');
slider.addEventListener('input', () => {
const y = Number(slider.value);
const x = morph.radiusX.baseVal;
// Beide Werte über das Attribut setzen: das funktioniert überall zuverlässig
morph.setAttribute('radius', `${x} ${y}`);
console.log('radiusY =', morph.radiusY.baseVal);
});// Wichtig · Fallstricke
- Schreibgeschützt: Mit
morph.radiusY = 5lässt sich nichts ändern. Im Strict Mode wirft die Zuweisung einenTypeError. Ändern kann man den Wert überradiusY.baseValodersetAttribute('radius', …). - Ein oder zwei Werte: Setzt man
radiusY.baseVal, obwohl das Attribut nur einen Wert enthält, verhalten sich die Browser teilweise unterschiedlich. Am sichersten ist es, immer beide Werte über das Attribut zu setzen. - Ungültige Werte: Bei negativen Werten ist der Filter wirkungslos. Bei
0ist das Primitiv laut Spezifikation ebenfalls wirkungslos. Ältere Browser behandeln diesen Fall aber teilweise anders. - Leistung: Große Radien auf großen Flächen verursachen viel Rechenaufwand beim Rendern, besonders wenn sie in jedem Animationsschritt geändert werden.
- Kompatibilität: Wird in allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt.