Signatur
Beschreibung
Die Eigenschaft radiusX der Schnittstelle SVGFEMorphologyElement gibt ein SVGAnimatedNumber-Objekt zurück, das die horizontale Komponente des radius-Attributs eines <feMorphology>-Filterprimitivs abbildet. Der Filter macht Formen und Text über operator="erode" dünner oder über operator="dilate" dicker. Der Radius legt fest, wie stark das passiert.
Das Attribut radius nimmt eine oder zwei Zahlen an. Bei einer Zahl gilt sie für beide Achsen, dann sind radiusX und radiusY gleich. Bei zwei Zahlen, zum Beispiel radius="4 1", ist die erste der X-Radius und die zweite der Y-Radius. Fehlt das Attribut, ist der Wert 0. Dann ist der Filter wirkungslos.
Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Über radiusX.baseVal liest du den Wert aus dem Attribut. radiusX.animVal liefert den aktuellen, eventuell per SMIL animierten Wert. Wenn du den Radius ändern willst, setzt du am besten setAttribute("radius", ...). So bleiben X- und Y-Wert zuverlässig gleich aufgeteilt.
Rückgabewert
baseVal (Wert aus dem Attribut, number) und animVal (aktueller, eventuell animierter Wert, nur lesbar).Beispiele
X-Radius aus dem Attribut auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const morph = document.createElementNS(svgNS, 'feMorphology');
morph.setAttribute('operator', 'dilate');
morph.setAttribute('radius', '4 1');
console.log(morph.radiusX.baseVal); // X-Komponente
console.log(morph.radiusY.baseVal); // Y-KomponenteEin Wert gilt für beide Achsen
const morph = document.createElementNS('http://www.w3.org/2000/svg', 'feMorphology');
morph.setAttribute('radius', '3');
console.log(morph.radiusX.baseVal, morph.radiusY.baseVal);
// Ohne radius-Attribut
morph.removeAttribute('radius');
console.log(morph.radiusX.baseVal);Konturstärke per Schieberegler steuern
// HTML: <svg><filter id="bold"><feMorphology id="m" operator="dilate" radius="1"/></filter>
// <text x="10" y="40" filter="url(#bold)">Hallo</text></svg>
// <input type="range" id="slider" min="0" max="5" step="0.5" value="1">
const morph = document.querySelector('#m');
const slider = document.querySelector('#slider');
slider.addEventListener('input', () => {
// nur horizontal verbreitern, vertikal fest bei 0.5
morph.setAttribute('radius', `${slider.value} 0.5`);
console.log('radiusX =', morph.radiusX.baseVal);
});// Wichtig · Fallstricke
radiusXist schreibgeschützt. Eine Zuweisung wiemorph.radiusX = 5hat keine Wirkung und löst im Strict Mode einenTypeErroraus. Nimm stattdessensetAttribute('radius', ...).- Negative Werte sind ein Fehler und schalten den Filtereffekt ab. Der Wert
0schaltet den Effekt ebenfalls ab. In älteren Spezifikationen und manchen Browsern wird das Element in diesen Fällen durchsichtig dargestellt. - Große Radien kosten viel Rechenzeit, vor allem wenn der Filter auf großen Flächen liegt oder animiert wird.
- SVG-Elemente musst du mit
document.createElementNSund dem SVG-Namensraum erzeugen. MitcreateElementfehlt die Eigenschaft. - Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).