SVGEllipseElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGEllipseElement extends SVGGeometryElement

Beschreibung

Das Interface SVGEllipseElement steht für jedes <ellipse>-Element in einem SVG-Dokument. Die Vererbungskette lautet SVGGeometryElement → SVGGraphicsElement → SVGElement → Element. Dadurch stehen neben den ellipsen-spezifischen Eigenschaften auch Geometrie-Methoden wie getTotalLength(), getPointAtLength(), isPointInFill() und getBBox() zur Verfügung.

Das Interface bietet vier schreibgeschützte Eigenschaften vom Typ SVGAnimatedLength:

cx – x-Koordinate des Mittelpunkts
cy – y-Koordinate des Mittelpunkts
rx – horizontaler Radius
ry – vertikaler Radius

Jede dieser Eigenschaften hat einen baseVal (den im Attribut gesetzten Wert, veränderbar) und einen animVal (den aktuellen Wert unter SMIL-Animation, nur lesbar). Über el.rx.baseVal.value = 40 lässt sich der Radius direkt als Zahl setzen, ohne Strings zusammenzubauen.

Einsetzen lässt sich das Interface vor allem für interaktive Grafiken, Datenvisualisierungen und Animationen, bei denen Ellipsen per Skript erzeugt, verschoben oder in der Größe verändert werden. Neue Elemente müssen dabei mit document.createElementNS() im SVG-Namensraum angelegt werden.

Rückgabewert

Typ

SVGEllipseElement

Beschreibung

Instanzen entstehen durch Parsen von <ellipse> im Markup oder per document.createElementNS("http://www.w3.org/2000/svg", "ellipse"). Einen eigenen Konstruktor gibt es nicht.

Beispiele

Ellipse per Skript erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '120');

const ellipse = document.createElementNS(SVG_NS, 'ellipse');
ellipse.setAttribute('cx', '100');
ellipse.setAttribute('cy', '60');
ellipse.setAttribute('rx', '80');
ellipse.setAttribute('ry', '40');
ellipse.setAttribute('fill', 'steelblue');

svg.append(ellipse);
document.body.append(svg);

console.log(ellipse instanceof SVGEllipseElement);
console.log(ellipse.rx.baseVal.value);

true 80

Radien über baseVal ändern (Hover-Effekt)

// <svg><ellipse id="e" cx="100" cy="60" rx="50" ry="30" fill="tomato"/></svg>
const el = document.querySelector('#e');

el.addEventListener('mouseenter', () => {
  el.rx.baseVal.value = 70;
  el.ry.baseVal.value = 45;
});

el.addEventListener('mouseleave', () => {
  el.rx.baseVal.value = 50;
  el.ry.baseVal.value = 30;
});

console.log(el.getAttribute('rx')); // Attribut wird synchronisiert

50

Umfang und Treffertest mit Geometrie-Methoden

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

// Näherungsweiser Umfang der Ellipse
console.log(el.getTotalLength().toFixed(1));

// Liegt der Mittelpunkt in der Füllfläche?
const svg = el.ownerSVGElement;
const pt = svg.createSVGPoint();
pt.x = el.cx.baseVal.value;
pt.y = el.cy.baseVal.value;
console.log(el.isPointInFill(pt));

// Bounding Box
const { x, y, width, height } = el.getBBox();
console.log(x, y, width, height);

"193.8" (bei rx=50, ry=30) true 50 30 100 60 (bei cx=100, cy=60)

Ellipse animieren mit requestAnimationFrame

const el = document.querySelector('ellipse');
const start = performance.now();

const tick = (now) => {
  const t = (now - start) / 1000;
  // Pulsieren zwischen 20 und 60
  el.rx.baseVal.value = 40 + 20 * Math.sin(t * 2);
  el.ry.baseVal.value = 40 - 20 * Math.sin(t * 2);
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

// Wichtig · Fallstricke

Namensraum beachten: document.createElement('ellipse') erzeugt ein wirkungsloses HTMLUnknownElement. Richtig ist createElementNS('http://www.w3.org/2000/svg', 'ellipse').
Keine direkte Zuweisung: el.rx = 40 bewirkt nichts, weil rx ein schreibgeschütztes SVGAnimatedLength-Objekt ist. Stattdessen el.rx.baseVal.value setzen oder setAttribute() verwenden.
animVal vs. baseVal: Während einer SMIL-Animation liefert nur animVal den sichtbaren Wert. CSS-Animationen von rx/ry (seit SVG 2 als Geometrie-Eigenschaften erlaubt) spiegeln sich dagegen nicht in animVal wider. Dafür getComputedStyle() nutzen.
auto-Werte: Laut SVG 2 übernimmt rx bzw. ry bei auto oder fehlendem Wert den jeweils anderen Radius. Ältere Browser setzen das nicht einheitlich um. Beide Radien sollte man deshalb immer ausdrücklich angeben.
Prozentwerte beziehen sich auf den Viewport (rx auf die Breite, ry auf die Höhe). baseVal.value gibt immer Benutzereinheiten zurück, der Einheitentyp steht in baseVal.unitType.
getTotalLength() ist bei Ellipsen nur eine Näherung und kann je nach Browser leicht abweichen.
Browser-Kompatibilität: Das Interface wird von allen modernen Browsern unterstützt. isPointInFill()/isPointInStroke() auf SVGGeometryElement sind erst seit etwa 2018–2020 flächendeckend verfügbar.

Siehe auch

SVGLineElement SVGFETileElement SVGPolylineElement SVGScriptElement SVGTitleElement