Signatur
Beschreibung
Die Eigenschaft cx des Interfaces SVGCircleElement spiegelt das cx-Attribut eines <circle>-Elements wider, also die x-Koordinate des Kreismittelpunkts im aktuellen Benutzerkoordinatensystem. Sie ist schreibgeschützt: Das zurückgegebene Objekt selbst kann nicht ersetzt werden, wohl aber sein Inhalt.
Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedLength-Objekt. Dieses besitzt zwei Eigenschaften: baseVal (der im Attribut hinterlegte Grundwert, änderbar) und animVal (der aktuelle, ggf. durch SMIL-Animationen veränderte Wert, nur lesbar). Beide sind SVGLength-Objekte mit value (in Benutzereinheiten), valueInSpecifiedUnits, unitType und valueAsString.
Typische Einsatzgebiete sind interaktive Diagramme, Drag-and-Drop von SVG-Formen, Animationen per requestAnimationFrame oder das Auslesen der Kreisposition für Kollisionsberechnungen. Das Setzen über cx.baseVal.value aktualisiert automatisch auch das cx-Attribut im DOM.
Rückgabewert
baseVal (änderbarer Grundwert) und animVal (aktueller animierter Wert, nur lesbar), jeweils vom Typ SVGLength.Beispiele
Mittelpunkt eines Kreises auslesen
// <svg width="200" height="200"><circle id="punkt" cx="50" cy="80" r="20" /></svg>
const circle = document.getElementById('punkt');
console.log(circle.cx.baseVal.value); // Zahl in Benutzereinheiten
console.log(circle.cx.baseVal.valueAsString); // Wert als Zeichenkette
console.log(circle.cx.animVal.value); // aktueller (animierter) WertKreis per Code verschieben
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '100');
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '20');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '15');
svg.append(circle);
document.body.append(svg);
// Grundwert ändern – das Attribut wird automatisch mitgezogen
circle.cx.baseVal.value = 150;
console.log(circle.getAttribute('cx'));Horizontale Animation mit requestAnimationFrame
const circle = document.querySelector('circle');
const maxX = 280;
let richtung = 1;
const schritt = () => {
const cx = circle.cx.baseVal;
if (cx.value >= maxX || cx.value <= 20) richtung *= -1;
cx.value += 2 * richtung;
requestAnimationFrame(schritt);
};
requestAnimationFrame(schritt);Einheiten umrechnen mit convertToSpecifiedUnits
// <circle id="k" cx="2cm" cy="50" r="10" />
const cx = document.getElementById('k').cx.baseVal;
console.log(cx.unitType === SVGLength.SVG_LENGTHTYPE_CM); // true
console.log(cx.valueInSpecifiedUnits); // 2
console.log(Math.round(cx.value)); // ca. 76 Benutzereinheiten (px)
cx.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(cx.valueAsString);// Wichtig · Fallstricke
- Kein Zahlenwert:
circle.cxliefert einSVGAnimatedLength-Objekt.circle.cx + 10odercircle.cx = 100funktionieren nicht – verwendecircle.cx.baseVal.value. - Schreibgeschützt: Eine Zuweisung an
cxselbst wird im nicht-strikten Modus stillschweigend ignoriert und wirft im Strict Mode einenTypeError. animValist nur lesbar: Schreibversuche lösen eineDOMException(NoModificationAllowedError) aus.- CSS-Eigenschaft
cx: In SVG 2 istcxauch eine Geometrie-Eigenschaft in CSS. Ein per Stylesheet gesetzter Wert überschreibt die Darstellung, wird aber nicht inbaseValwidergespiegelt – für den tatsächlich gerenderten WertgetComputedStyle(circle).cxnutzen. - Prozentwerte: Bei
cx="50%"bezieht sichvalueauf die Breite des Viewports; ohne gerendertes SVG kann die Umrechnung ungenau sein. - Kompatibilität: In allen modernen Browsern seit Langem unterstützt. Elemente müssen mit
createElementNSim SVG-Namensraum erzeugt werden, sonst existiert die Eigenschaft nicht.