SVGEllipseElement.rx — Eigenschaft · JavaScript-Referenz

Signatur

SVGEllipseElement.rx

Beschreibung

Die Eigenschaft rx des Interfaces SVGEllipseElement entspricht dem Attribut rx eines <ellipse>-Elements. Sie gibt den Radius der Ellipse entlang der x-Achse zurück, allerdings nicht als einfache Zahl, sondern als SVGAnimatedLength-Objekt.

Dieses Objekt besitzt zwei Eigenschaften: baseVal enthält den im Attribut bzw. per Skript gesetzten Grundwert, animVal den aktuellen Wert, auch während einer SMIL-Animation (z. B. mit <animate>). Beide sind SVGLength-Objekte mit value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.

Die Eigenschaft rx selbst ist schreibgeschützt: Das Objekt lässt sich nicht ersetzen. Den Radius ändern Sie aber über rx.baseVal.value oder mit setAttribute('rx', …). Das ist praktisch für Diagramme, Visualisierungen oder interaktive Grafiken, bei denen Sie Geometrie direkt und ohne Umweg über Zeichenketten auslesen oder setzen möchten.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils SVGLength), das den horizontalen Radius der Ellipse beschreibt.

Beispiele

Radius auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const ellipse = document.createElementNS(svgNS, 'ellipse');
ellipse.setAttribute('cx', '100');
ellipse.setAttribute('cy', '50');
ellipse.setAttribute('rx', '80');
ellipse.setAttribute('ry', '30');

console.log(ellipse.rx.baseVal.value);
console.log(ellipse.rx.baseVal.valueAsString);

80 80

Radius per Skript ändern (Hover-Effekt)

// <svg><ellipse id="oval" cx="100" cy="60" rx="50" ry="30" fill="teal"/></svg>
const oval = document.getElementById('oval');
const original = oval.rx.baseVal.value;

oval.addEventListener('mouseenter', () => {
  oval.rx.baseVal.value = original * 1.5; // aktualisiert das Attribut
});
oval.addEventListener('mouseleave', () => {
  oval.rx.baseVal.value = original;
});

console.log(oval.getAttribute('rx'));

50

Einheiten und animierter Wert

// <svg width="400"><ellipse id="e" cx="200" cy="50" rx="10%" ry="20">
//   <animate attributeName="rx" from="10%" to="40%" dur="2s" repeatCount="indefinite"/>
// </ellipse></svg>
const e = document.getElementById('e');
const { baseVal, animVal } = e.rx;

console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(baseVal.valueInSpecifiedUnits); // 10
console.log(baseVal.value); // in Benutzereinheiten, abhängig vom Viewport

setTimeout(() => console.log('aktuell:', animVal.value), 1000);

true 10 40 aktuell: 100 (ungefähr, je nach Zeitpunkt)

// Wichtig · Fallstricke

ellipse.rx = 50 hat keine Wirkung (im Strict-Mode wird ein TypeError ausgelöst), weil die Eigenschaft schreibgeschützt ist. Ändern Sie stattdessen rx.baseVal.value oder verwenden Sie setAttribute.
animVal ist immer schreibgeschützt. Schreibzugriffe darauf lösen eine DOMException aus.
Den Wert rx="auto" (SVG 2) und CSS-Eigenschaften wie rx: 20px in Stylesheets bildet baseVal je nach Browser nicht oder unterschiedlich ab. Verlässlicher ist dann getComputedStyle(el).rx oder getBBox().
Bei Prozentangaben hängt value von der Viewport-Breite ab. Ist das Element nicht gerendert, kann das Ergebnis 0 oder ungenau sein.
Erzeugen Sie Elemente mit document.createElementNS und dem SVG-Namensraum, sonst entsteht kein SVGEllipseElement und rx ist undefined.
Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGEllipseElement SVGEllipseElement.ry SVGEllipseElement.cx SVGEllipseElement.cy SVGAnimatedLength SVGLength SVGCircleElement.r