Signatur
Beschreibung
Die Eigenschaft cx eines <radialGradient>-Elements gibt das Attribut cx als SVGAnimatedLength-Objekt zurück. Es beschreibt die x-Koordinate des Mittelpunkts des äußersten Kreises des Verlaufs. Ist das Attribut nicht gesetzt, gilt der Standardwert 50%.
Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen. Den Wert änderst du über cx.baseVal (ein SVGLength), etwa mit baseVal.value, baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). Über cx.animVal liest du den aktuellen, eventuell durch SMIL-Animation veränderten Wert.
Wie der Wert zu deuten ist, hängt von gradientUnits ab. Bei objectBoundingBox (Standard) bezieht er sich auf den Begrenzungsrahmen des gefüllten Elements (0 bis 1 bzw. 0% bis 100%). Bei userSpaceOnUse gilt dagegen das Benutzerkoordinatensystem. Typische Einsätze sind interaktive Lichteffekte, zum Beispiel ein Glanzpunkt, der dem Mauszeiger folgt, oder Verläufe, die per Skript animiert werden.
Rückgabewert
baseVal (der im Attribut gesetzte, veränderbare SVGLength) und animVal (der aktuell animierte Wert, nur lesbar).Beispiele
Mittelpunkt auslesen
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.innerHTML = `<defs><radialGradient id="glow" cx="30%" cy="40%" r="60%"></radialGradient></defs>`;
document.body.append(svg);
const grad = svg.querySelector('#glow');
const { baseVal } = grad.cx;
console.log(baseVal.valueAsString);
console.log(baseVal.valueInSpecifiedUnits);
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);Standardwert ohne gesetztes Attribut
const grad = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
console.log(grad.cx.baseVal.valueAsString);
console.log(grad.hasAttribute('cx'));Glanzpunkt folgt der Maus
// HTML: <svg id="s" viewBox="0 0 200 200" width="200" height="200">
// <defs><radialGradient id="shine"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#36c"/></radialGradient></defs>
// <circle cx="100" cy="100" r="90" fill="url(#shine)"/></svg>
const svg = document.getElementById('s');
const shine = document.getElementById('shine');
svg.addEventListener('pointermove', (e) => {
const rect = svg.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
// Einheit explizit auf Prozent setzen
shine.cx.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, x);
shine.cy.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, y);
});Direkte Zuweisung ist wirkungslos
const grad = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
grad.cx = 0.2; // wird ignoriert (im Strict Mode: TypeError)
console.log(grad.cx instanceof SVGAnimatedLength);
grad.cx.baseVal.valueAsString = '0.2';
console.log(grad.getAttribute('cx'));// Wichtig · Fallstricke
- Schreibgeschützt:
element.cx = …hat keine Wirkung und löst im Strict Mode (z. B. in ES-Modulen) einenTypeErroraus. Ändere den Wert übercx.baseValoder mitsetAttribute('cx', …). - Einheiten:
baseVal.valuegibt den Wert in Benutzereinheiten zurück. Bei Prozentangaben an einem Verlauf mitobjectBoundingBoxkann die Umrechnung je nach Browser unerwartete Werte liefern. Für eindeutige Ergebnisse nutzt du besservalueInSpecifiedUnitszusammen mitunitType. - Der Wert hängt von
gradientUnitsab. Nach einem Wechsel vonobjectBoundingBoxaufuserSpaceOnUsemusst ducxmeist neu setzen. - Vererbung über
href: Ein Verlauf kanncxvon einem referenzierten Verlauf übernehmen. Die Eigenschaft zeigt aber nur das eigene Attribut bzw. den Standardwert50%, nicht den geerbten Wert. animValzeigt SMIL-Animationen (<animate>). CSS-Animationen oder Transformationen bildet es nicht ab.- Kompatibilität: Die Eigenschaft wird seit vielen Jahren von allen aktuellen Browsern unterstützt.