SVGEllipseElement.cx — Eigenschaft · JavaScript-Referenz

Signatur

SVGEllipseElement.cx

Beschreibung

Die Eigenschaft cx eines SVGEllipseElement spiegelt das Attribut cx des <ellipse>-Elements wider, also die horizontale Position des Mittelpunkts. Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedLength-Objekt mit zwei Teilen: baseVal (der im Markup bzw. per Skript gesetzte Grundwert) und animVal (der aktuelle, ggf. durch SMIL-Animation veränderte Wert).

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Den Wert ändert man stattdessen über ellipse.cx.baseVal.value (in Benutzereinheiten), über baseVal.valueAsString (z. B. "50%") oder über newValueSpecifiedUnits(). Alternativ funktioniert weiterhin setAttribute("cx", ...).

Typische Einsatzzwecke sind interaktive Grafiken, Diagramme und Animationen per Skript, bei denen Ellipsen verschoben oder ihre Position ausgelesen werden soll, ohne Attribut-Strings manuell zu parsen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal und animVal (jeweils SVGLength), das die x-Koordinate des Mittelpunkts beschreibt. Fehlt das Attribut, ist der Wert 0.

Beispiele

Mittelpunkt auslesen

// <svg><ellipse id="oval" cx="120" cy="60" rx="80" ry="40" /></svg>
const ellipse = document.getElementById('oval');
console.log(ellipse.cx.baseVal.value);
console.log(ellipse.cx.baseVal.valueAsString);
console.log(ellipse.cx.animVal.value);

120 "120" 120

Ellipse per Skript horizontal verschieben

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

const moveBy = (dx) => {
  ellipse.cx.baseVal.value += dx;
};

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowRight') moveBy(10);
  if (event.key === 'ArrowLeft') moveBy(-10);
});

Prozentwerte und Einheiten verwenden

const ellipse = document.querySelector('ellipse');
const len = ellipse.cx.baseVal;

// Mittelpunkt auf 50 % der Viewport-Breite setzen
len.valueAsString = '50%';
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(ellipse.getAttribute('cx'));

// Umrechnen in Benutzereinheiten (px)
len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(len.valueAsString);

true "50%" "<berechneter px-Wert>px"

Animation per requestAnimationFrame

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

const tick = (now) => {
  const t = (now - start) / 1000;
  ellipse.cx.baseVal.value = 150 + Math.sin(t * 2) * 100;
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

// Wichtig · Fallstricke

Schreibgeschützt: ellipse.cx = 100 hat keine Wirkung (im Strict Mode TypeError). Immer ellipse.cx.baseVal.value setzen.
animVal ist nur lesbar und spiegelt SMIL-Animationen (<animate>) wider, nicht aber CSS-Animationen oder Transitions.
Seit SVG 2 ist cx auch eine CSS-Geometrieeigenschaft. Ein per CSS gesetztes cx überschreibt das Attribut in der Darstellung, baseVal zeigt aber weiterhin den Attributwert. Den tatsächlich gerenderten Wert liefert getComputedStyle(el).cx.
Bei Prozentwerten bezieht sich value auf die Breite des nächsten Viewports. Ist das Element nicht gerendert (z. B. nicht im DOM), kann die Umrechnung ungenau sein.
Die Koordinate liegt im lokalen Benutzerkoordinatensystem. Ein transform am Element oder an Elternelementen wird nicht berücksichtigt.
Wird von allen modernen Browsern unterstützt.

Siehe auch

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