SVGRadialGradientElement.fy — Eigenschaft · JavaScript-Referenz

Signatur

SVGRadialGradientElement.fy

Beschreibung

Die Eigenschaft fy spiegelt das Attribut fy eines <radialGradient>-Elements wider. Sie gibt die y-Koordinate des Brennpunkts an, also der Stelle, an der der Farbverlauf mit dem Offset 0 beginnt. Liegt der Brennpunkt nicht im Mittelpunkt (cx/cy), entsteht ein außermittiger Verlauf, wie man ihn z. B. für Lichtreflexe auf Kugeln oder Glanzeffekte nutzt.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über fy.baseVal (ein SVGLength) ändern, etwa mit baseVal.value oder baseVal.newValueSpecifiedUnits(). fy.animVal enthält den aktuellen, eventuell durch SMIL-Animation veränderten Wert und kann nur gelesen werden.

Fehlt das Attribut fy, übernimmt es den Wert von cy. Wie die Koordinate ausgewertet wird, hängt von gradientUnits ab: Bei objectBoundingBox (Standard) stehen Werte wie 0.3 bzw. 30% für einen Anteil am Begrenzungsrahmen des gefüllten Elements, bei userSpaceOnUse gelten Koordinaten des Benutzerkoordinatensystems.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbarer Basiswert als SVGLength) und animVal (schreibgeschützter aktueller Animationswert).

Beispiele

Brennpunkt auslesen

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

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

30% true 30

Brennpunkt per Skript verschieben

const gradient = document.querySelector('radialGradient');

// Brennpunkt auf 20 % der Höhe setzen
gradient.fy.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  20
);

console.log(gradient.getAttribute('fy'));

20%

Lichtreflex folgt der Maus

const svg = document.querySelector('svg');
const gradient = document.getElementById('kugel-glanz');

svg.addEventListener('pointermove', (event) => {
  const rect = svg.getBoundingClientRect();
  const x = ((event.clientX - rect.left) / rect.width) * 100;
  const y = ((event.clientY - rect.top) / rect.height) * 100;

  gradient.fx.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, x);
  gradient.fy.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, y);
});

// Wichtig · Fallstricke

gradient.fy = … hat keine Wirkung (im Strict Mode wirft es einen TypeError). Ändern lässt sich der Wert nur über fy.baseVal oder mit setAttribute('fy', …).
Ist fy nicht gesetzt, spiegelt baseVal den Standardwert wider und nicht automatisch den Wert von cy. Den tatsächlich gerenderten Brennpunkt musst du also selbst aus cy ableiten.
Bei gradientUnits="objectBoundingBox" liefert baseVal.value für Prozentwerte nicht unbedingt den erwarteten Bruchteil. Verlässlicher sind valueInSpecifiedUnits und unitType.
Liegt der Brennpunkt außerhalb des Kreises, der durch fr/r festgelegt ist, zeigen Browser das unterschiedlich an. SVG 1.1 schob den Punkt auf den Kreisrand, SVG 2 rendert einen Kegel.
Wird von allen modernen Browsern unterstützt.

Siehe auch

SVGRadialGradientElement SVGRadialGradientElement.fx SVGRadialGradientElement.cy SVGRadialGradientElement.fr SVGRadialGradientElement.r SVGAnimatedLength SVGLength