SVGEllipseElement.cy — Eigenschaft · JavaScript-Referenz

Signatur

SVGEllipseElement.cy

Beschreibung

Die schreibgeschützte Eigenschaft cy eines SVGEllipseElement steht für das Attribut cy des <ellipse>-Elements, also die y-Koordinate des Ellipsenmittelpunkts. Sie gibt keine Zahl zurück, sondern ein SVGAnimatedLength-Objekt mit den Eigenschaften baseVal und animVal.

baseVal ist ein SVGLength-Objekt mit dem statischen Wert aus dem Attribut. Es lässt sich ändern, zum Beispiel über baseVal.value (in Benutzereinheiten) oder baseVal.valueAsString. animVal enthält den aktuell dargestellten Wert, der sich während einer SMIL-Animation (<animate>) vom Grundwert unterscheiden kann.

Die Eigenschaft eignet sich, um Ellipsen per Skript zu verschieben, Positionen für Kollisions- oder Layoutberechnungen auszulesen oder Werte in verschiedene Einheiten umzurechnen (convertToSpecifiedUnits()). „Schreibgeschützt“ bedeutet nur, dass man cy selbst kein neues Objekt zuweisen kann. Der Wert darin ist über baseVal trotzdem änderbar.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbare SVGLength, Grundwert) und animVal (schreibgeschützte SVGLength, aktuell animierter Wert). Fehlt das Attribut, ist der Wert 0.

Beispiele

Mittelpunkt auslesen

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

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

60 60

Ellipse vertikal verschieben

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

// Grundwert direkt ändern – das Attribut wird dabei aktualisiert
ellipse.cy.baseVal.value += 25;
console.log(ellipse.getAttribute('cy'));

85

Prozentwert in Benutzereinheiten umrechnen

// <svg width="400" height="200"><ellipse cy="50%" .../></svg>
const ellipse = document.querySelector('ellipse');
const len = ellipse.cy.baseVal;

console.log(len.valueAsString);   // "50%"
console.log(len.value);           // 100 (50 % von 200)

len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(ellipse.getAttribute('cy'));

50% 100 100px

Ellipse mit der Maus nachführen

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

svg.addEventListener('pointermove', (event) => {
  const pt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(svg.getScreenCTM().inverse());
  ellipse.cx.baseVal.value = pt.x;
  ellipse.cy.baseVal.value = pt.y;
});

// Wichtig · Fallstricke

Kein Zahlenwert: ellipse.cy ist ein Objekt. Rechnungen wie ellipse.cy + 10 führen zu Unsinn. Man muss über ellipse.cy.baseVal.value gehen.
Zuweisung wirkungslos: ellipse.cy = 50 ändert nichts (im Strict Mode gibt es einen TypeError). Stattdessen baseVal.value setzen oder setAttribute('cy', …) verwenden.
animVal ist schreibgeschützt: Ein Schreibzugriff darauf wirft eine NoModificationAllowedError-Ausnahme.
CSS hat Vorrang: In SVG 2 ist cy auch eine CSS-Eigenschaft. Ein per Stylesheet gesetztes cy überschreibt das Attribut in der Darstellung, baseVal spiegelt aber nur das Attribut wider. Den tatsächlichen Wert liefert dann getComputedStyle(el).cy.
Relative Einheiten (%, em) werden nur korrekt aufgelöst, wenn das Element im gerenderten Dokument hängt.
Wird in allen modernen Browsern unterstützt.

Siehe auch

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