SVGRadialGradientElement.cy — Eigenschaft · JavaScript-Referenz

Signatur

SVGRadialGradientElement.cy

Beschreibung

Die Eigenschaft cy eines SVGRadialGradientElement (also eines <radialGradient>-Elements) spiegelt das gleichnamige SVG-Attribut wider. Sie legt die y-Koordinate des Mittelpunkts des äußersten Kreises fest, auf dem der Farbwert für den Offset 1 (letzter <stop>) liegt.

Der Rückgabewert ist ein SVGAnimatedLength-Objekt. Über baseVal liest und ändert man den im Attribut gesetzten Grundwert, animVal liefert den aktuellen (ggf. durch SMIL-Animation veränderten) Wert. Die Eigenschaft selbst ist schreibgeschützt – Änderungen erfolgen über cy.baseVal.value, cy.baseVal.newValueSpecifiedUnits() oder direkt per setAttribute("cy", …).

Ist das Attribut nicht gesetzt, gilt der Standardwert 50%. Wie der Wert interpretiert wird, hängt von gradientUnits ab: Bei objectBoundingBox (Standard) bezieht er sich relativ auf den Begrenzungsrahmen des gefüllten Elements, bei userSpaceOnUse auf das Benutzerkoordinatensystem.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbare SVGLength) und animVal (nur lesbarer, animierter Wert) für die y-Koordinate des Verlaufsmittelpunkts.

Beispiele

Mittelpunkt-Koordinate auslesen

// <svg><defs><radialGradient id="glow" cy="30%">…</radialGradient></defs></svg>
const gradient = document.getElementById("glow");
const { baseVal } = gradient.cy;

console.log(baseVal.valueAsString);
console.log(baseVal.valueInSpecifiedUnits);
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

30% 30 true

Verlaufsmittelpunkt der Mausposition folgen lassen

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
const gradient = document.querySelector("#spotlight");

svg.addEventListener("pointermove", (event) => {
  const rect = svg.getBoundingClientRect();
  const yPercent = ((event.clientY - rect.top) / rect.height) * 100;
  // Wert in Prozent setzen (gradientUnits="objectBoundingBox")
  gradient.cy.baseVal.newValueSpecifiedUnits(
    SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
    yPercent
  );
});

Radialen Verlauf dynamisch erzeugen

const svgNS = "http://www.w3.org/2000/svg";
const defs = document.querySelector("svg defs");

const grad = document.createElementNS(svgNS, "radialGradient");
grad.id = "sun";
grad.setAttribute("cx", "50%");
grad.setAttribute("cy", "25%");

for (const [offset, color] of [["0%", "#fff6a0"], ["100%", "#ff8800"]]) {
  const stop = document.createElementNS(svgNS, "stop");
  stop.setAttribute("offset", offset);
  stop.setAttribute("stop-color", color);
  grad.append(stop);
}
defs.append(grad);

console.log(grad.cy.baseVal.valueAsString);
console.log(grad.cy.animVal.valueAsString);

25% 25%

// Wichtig · Fallstricke

Schreibgeschützt: gradient.cy = … hat keine Wirkung (im strikten Modus TypeError). Ändern Sie stattdessen cy.baseVal oder das Attribut.
Einheiten beachten: baseVal.value liefert bei Prozentangaben einen in Benutzereinheiten umgerechneten Wert, der vom Kontext abhängt und bei objectBoundingBox irreführend sein kann. Für Prozentwerte besser valueInSpecifiedUnits bzw. valueAsString verwenden.
Standardwert: Fehlt das Attribut, liefert baseVal 50%. Mit href geerbte Werte aus einem referenzierten Verlauf werden nicht in cy widergespiegelt.
animVal ist nur lesbar; manche Browser geben dort unabhängig von SMIL-Animationen denselben Wert wie baseVal zurück.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGRadialGradientElement SVGRadialGradientElement.cx SVGRadialGradientElement.r SVGRadialGradientElement.fy SVGAnimatedLength SVGLength