SVGCircleElement.cy — Eigenschaft · JavaScript-Referenz

Signatur

SVGCircleElement.cy

Beschreibung

Die Eigenschaft cy des Interfaces SVGCircleElement spiegelt das Attribut cy eines <circle>-Elements wider, also die y-Koordinate des Kreismittelpunkts im aktuellen Benutzerkoordinatensystem. Fehlt das Attribut, gilt der Wert 0.

Schreibgeschützt ist nur die Eigenschaft selbst: Sie gibt immer dasselbe SVGAnimatedLength-Objekt zurück. Über dessen Eigenschaft baseVal (ein SVGLength) kannst du den Wert lesen und ändern. animVal enthält den aktuellen, eventuell durch SMIL-Animation (<animate>) veränderten Wert und lässt sich nur lesen.

Einsatzgebiete sind z. B. interaktive Diagramme, Drag-and-Drop von SVG-Punkten, Physik- oder Spielanimationen und das Auslesen von Positionen ohne String-Parsing. Anders als getAttribute('cy') liefert cy.baseVal.value direkt eine Zahl in Benutzereinheiten, auch wenn im Attribut Prozent oder andere Einheiten stehen.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (SVGLength, beschreibbar) und animVal (SVGLength, schreibgeschützt). Über baseVal.value bekommst du die y-Koordinate als Zahl in Benutzereinheiten.

Beispiele

Mittelpunkt-y-Koordinate auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.innerHTML = '<circle id="punkt" cx="50" cy="75" r="20" />';
document.body.append(svg);

const kreis = svg.querySelector('#punkt');
console.log(kreis.cy.baseVal.value);      // Zahl
console.log(kreis.getAttribute('cy'));     // String

75 "75"

Wert über baseVal ändern (Attribut wird mitgezogen)

const kreis = document.querySelector('circle');

// kreis.cy = 100;  // wirkungslos, die Eigenschaft ist schreibgeschützt
kreis.cy.baseVal.value = 120;
console.log(kreis.getAttribute('cy'));

"120"

Fallender Ball mit requestAnimationFrame

const ball = document.querySelector('#ball');
const boden = 380;
let geschwindigkeit = 0;

const schritt = () => {
  const y = ball.cy.baseVal;
  geschwindigkeit += 0.5; // Schwerkraft
  y.value = Math.min(y.value + geschwindigkeit, boden - ball.r.baseVal.value);
  if (y.value < boden - ball.r.baseVal.value) {
    requestAnimationFrame(schritt);
  }
};
requestAnimationFrame(schritt);

Einheiten auswerten mit Prozentwerten

const kreis = document.querySelector('circle'); // cy="50%" in einem 200px hohen SVG
const laenge = kreis.cy.baseVal;

console.log(laenge.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(laenge.valueInSpecifiedUnits); // 50
console.log(laenge.value);                 // in Benutzereinheiten umgerechnet

true 50 100

// Wichtig · Fallstricke

Kein direktes Zuweisen: circle.cy = 10 hat keine Wirkung (im strikten Modus wirft es einen TypeError). Ändere stattdessen circle.cy.baseVal.value oder nutze setAttribute('cy', 10).
Prozentwerte beziehen sich auf die Höhe des Viewports. baseVal.value kann 0 oder einen falschen Wert liefern, solange das Element noch nicht im gerenderten Dokument hängt.
CSS gewinnt: Seit SVG 2 ist cy auch eine CSS-Eigenschaft. Ein per CSS gesetztes cy überschreibt das Attribut in der Darstellung, baseVal zeigt aber weiterhin den Attributwert. Den tatsächlich verwendeten Wert bekommst du mit getComputedStyle(el).cy.
animVal berücksichtigt nur SMIL-Animationen, keine CSS-Animationen oder Transitions.
transform-Attribute ändern cy nicht. Die Koordinate bleibt im lokalen Koordinatensystem, die Position auf dem Bildschirm liefert getBoundingClientRect().
Kompatibilität: Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGCircleElement SVGCircleElement.cx SVGCircleElement.r SVGAnimatedLength SVGLength SVGEllipseElement.cy HTMLSourceElement.type