SVGEllipseElement.ry — Eigenschaft · JavaScript-Referenz

Signatur

SVGEllipseElement.ry

Beschreibung

Die Eigenschaft ry eines SVGEllipseElement entspricht dem Attribut ry eines <ellipse>-Elements, also dem vertikalen Radius. Sie gibt keine einfache Zahl zurück, sondern ein SVGAnimatedLength-Objekt mit zwei Unterobjekten: baseVal (der im Attribut bzw. per Skript gesetzte Grundwert) und animVal (der aktuelle Wert, auch während einer SMIL-Animation).

Die Eigenschaft selbst ist schreibgeschützt. Das zurückgegebene SVGAnimatedLength gehört aber fest zum Element: Änderst du ry.baseVal.value oder rufst du ry.baseVal.newValueSpecifiedUnits() auf, wird das Attribut ry sofort aktualisiert und die Ellipse neu gezeichnet.

Nützlich ist das, wenn du Geometrie per Skript auslesen oder ändern willst, ohne Attribut-Strings mit getAttribute() selbst zu parsen. Das gilt z. B. für Animationen mit requestAnimationFrame, interaktive Diagramme oder Kollisionsberechnungen. Über baseVal.unitType und valueInSpecifiedUnits kommst du außerdem an die ursprüngliche Einheit (z. B. % oder em).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils SVGLength). baseVal.value enthält den vertikalen Radius in Benutzereinheiten (User Units).

Beispiele

Vertikalen Radius auslesen

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

console.log(ellipse.ry.baseVal.value);
console.log(ellipse.ry.animVal.value);

40 40

Radius per Skript ändern (Attribut wird synchronisiert)

const ellipse = document.querySelector('ellipse');

// Neuen Radius in Benutzereinheiten setzen
ellipse.ry.baseVal.value = 25;
console.log(ellipse.getAttribute('ry'));

// Mit expliziter Einheit setzen (Prozent)
ellipse.ry.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(ellipse.getAttribute('ry'));

25 10%

"Atmende" Ellipse mit requestAnimationFrame

const ellipse = document.querySelector('ellipse');
const baseRy = ellipse.ry.baseVal.value;

const tick = (time) => {
  // Radius schwingt um ±10 Einheiten
  ellipse.ry.baseVal.value = baseRy + Math.sin(time / 300) * 10;
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

Flächeninhalt aus rx und ry berechnen

const ellipse = document.querySelector('ellipse');
const rx = ellipse.rx.baseVal.value;
const ry = ellipse.ry.baseVal.value;

const area = Math.PI * rx * ry;
console.log(`Fläche: ${area.toFixed(2)}`);

Fläche: 10053.10

// Wichtig · Fallstricke

Nicht direkt zuweisen: ellipse.ry = 30 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Setze stattdessen ellipse.ry.baseVal.value oder nutze setAttribute('ry', …).
animVal ist schreibgeschützt: Wenn du animVal.value setzt, wird ein Fehler ausgelöst. Schreiben kannst du nur über baseVal.
CSS-Eigenschaft ry: In SVG 2 ist ry eine Geometrie-Eigenschaft und lässt sich deshalb auch per CSS setzen. ry.baseVal gibt nur den Attributwert wieder, nicht den per CSS berechneten Wert. Den bekommst du über getComputedStyle(ellipse).ry.
auto und fehlende Werte: In SVG 2 übernimmt ry="auto" den Wert von rx. Fehlt das Attribut, liefert baseVal.value je nach Browser 0. Ist der Radius 0, wird die Ellipse nicht gezeichnet. Negative Werte sind ungültig.
Relative Einheiten: Bei Prozentwerten bezieht sich baseVal.value auf die Höhe des Viewports. Das Element muss dafür im Dokument eingehängt sein, sonst kann die Umrechnung fehlschlagen oder falsche Werte liefern.
Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt. Das Verhalten bei auto und die CSS-Geometrie-Eigenschaften können zwischen den Browsern leicht abweichen.

Siehe auch

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