SVGRadialGradientElement.fx — Eigenschaft · JavaScript-Referenz

Signatur

SVGRadialGradientElement.fx

Beschreibung

Die Eigenschaft fx gibt das fx-Attribut eines <radialGradient>-Elements zurück. Dieses Attribut legt die x-Koordinate des Brennpunkts (Fokuspunkts) fest. Dort beginnt der Verlauf mit der Farbe des ersten <stop> (Offset 0). Liegt der Brennpunkt nicht im Mittelpunkt (cx/cy), wirkt der Verlauf asymmetrisch, zum Beispiel wie ein Glanzlicht auf einer Kugel.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, der enthaltene Wert lässt sich aber ändern: Über fx.baseVal (ein SVGLength) lesen oder setzen Sie den Grundwert des Attributs. fx.animVal liefert den aktuell gültigen Wert, auch während einer SMIL-Animation. Diesen Wert können Sie nur lesen.

Ist fx nicht angegeben, übernimmt das Attribut den Wert von cx. Wie der Wert ausgewertet wird, hängt von gradientUnits ab: Bei objectBoundingBox (Standard) ist er ein Anteil des umgebenden Rechtecks (Bounding Box) des Elements, bei userSpaceOnUse eine Koordinate im Benutzerkoordinatensystem.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbarer Grundwert als SVGLength) und animVal (nur lesbarer, aktuell wirksamer Wert).

Beispiele

Brennpunkt auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const grad = document.createElementNS(svgNS, 'radialGradient');
grad.setAttribute('cx', '0.5');
grad.setAttribute('fx', '0.3');

console.log(grad.fx.baseVal.value);
console.log(grad.fx.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);

0.3 true

Glanzlicht per Mausbewegung verschieben

// <svg id="ball" width="200" height="200">
//   <defs><radialGradient id="g" fx="0.5" fy="0.5">
//     <stop offset="0" stop-color="white"/>
//     <stop offset="1" stop-color="steelblue"/>
//   </radialGradient></defs>
//   <circle cx="100" cy="100" r="90" fill="url(#g)"/>
// </svg>
const svg = document.getElementById('ball');
const grad = document.getElementById('g');

svg.addEventListener('mousemove', (e) => {
  const rect = svg.getBoundingClientRect();
  // Anteil 0..1 innerhalb der Bounding Box
  grad.fx.baseVal.value = (e.clientX - rect.left) / rect.width;
  grad.fy.baseVal.value = (e.clientY - rect.top) / rect.height;
});

Wert in Prozent setzen

const grad = document.querySelector('radialGradient');
grad.fx.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(grad.getAttribute('fx'));

25%

// Wichtig · Fallstricke

Die Eigenschaft ist schreibgeschützt: Eine Zuweisung wie grad.fx = 0.2 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen grad.fx.baseVal.value.
Fehlt das Attribut fx, verhält sich der Verlauf so, als hätte fx den Wert von cx. baseVal gibt aber nicht zuverlässig diesen Ersatzwert zurück, sondern je nach Browser den Standardwert 50%. Lesen Sie in diesem Fall besser cx aus.
Wie fx ausgewertet wird, hängt von gradientUnits ab: Bei objectBoundingBox gilt ein Anteil zwischen 0 und 1, bei userSpaceOnUse gelten Koordinaten im Benutzerkoordinatensystem.
Liegt der Brennpunkt außerhalb des durch r und fr beschriebenen Kreises, stellen ältere Browser den Verlauf unterschiedlich dar. SVG 1.1 schrieb vor, den Brennpunkt auf den Kreisrand zu verschieben.
Wird ein Verlauf über href von einem anderen Verlauf geerbt, zeigt fx nur das eigene Attribut des Elements. Geerbte Werte sind darin nicht enthalten.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

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