SVGRadialGradientElement.fr — Eigenschaft · JavaScript-Referenz

Signatur

SVGRadialGradientElement.fr

Beschreibung

Die Eigenschaft fr des SVGRadialGradientElement spiegelt das SVG-2-Attribut fr eines <radialGradient>-Elements wider. Sie gibt den Radius des Fokus-Kreises an, also des Startkreises, von dem aus der Farbverlauf beginnt. Der Verlauf läuft vom Fokus-Kreis (Mittelpunkt fx/fy, Radius fr) zum Endkreis (Mittelpunkt cx/cy, Radius r).

Zurückgegeben wird ein SVGAnimatedLength. Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über fr.baseVal (ein SVGLength) ändern. fr.animVal liefert den aktuellen, ggf. durch SMIL-Animation veränderten Wert.

Fehlt das Attribut, gilt der Standardwert 0% – der Verlauf startet dann in einem Punkt. Mit einem größeren fr entsteht ein einfarbiger „Kern“ in der Stoppfarbe bei Offset 0, was sich etwa für Ring- oder Leuchteffekte eignet. Die Einheit richtet sich nach gradientUnits: bei objectBoundingBox (Standard) bezieht sich ein Prozentwert bzw. eine Zahl auf die Bounding-Box des gefüllten Elements.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (veränderbarer Basiswert als SVGLength) und animVal (schreibgeschützter, animierter Wert).

Beispiele

Fokus-Radius auslesen

// <svg><defs><radialGradient id="glow" fr="20%" r="50%">...</radialGradient></defs></svg>
const gradient = document.getElementById('glow');
const { baseVal } = gradient.fr;

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

20% 20 true

Fokus-Radius per Skript setzen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const defs = svg.querySelector('defs') ?? svg.appendChild(document.createElementNS(svgNS, 'defs'));

const grad = document.createElementNS(svgNS, 'radialGradient');
grad.id = 'ring';
[['0', 'gold'], ['1', 'crimson']].forEach(([offset, color]) => {
  const stop = document.createElementNS(svgNS, 'stop');
  stop.setAttribute('offset', offset);
  stop.setAttribute('stop-color', color);
  grad.append(stop);
});
defs.append(grad);

// Fokus-Radius auf 30 % setzen – ergibt einen goldenen Kern
grad.fr.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 30);
console.log(grad.getAttribute('fr'));

30%

Pulsierender Leuchteffekt

const grad = document.getElementById('glow');
let t = 0;

const animate = () => {
  t += 0.03;
  // fr zwischen 5 % und 35 % pendeln lassen
  const value = 20 + 15 * Math.sin(t);
  grad.fr.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, value);
  requestAnimationFrame(animate);
};
requestAnimationFrame(animate);

// Wichtig · Fallstricke

Schreibgeschützt: grad.fr = … bewirkt nichts (im Strict Mode TypeError). Ändern Sie stattdessen fr.baseVal oder das Attribut per setAttribute('fr', '20%').
SVG 2: fr kam erst mit SVG 2 hinzu. Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen es; sehr alte Browser ignorieren das Attribut und fr ist dort undefined. Vorher per 'fr' in SVGRadialGradientElement.prototype prüfen.
Ist fr größer oder gleich r, wird der Verlauf meist nur noch in der letzten Stoppfarbe gezeichnet. Negative Werte sind ungültig.
Prozentwerte beziehen sich bei gradientUnits="userSpaceOnUse" auf die normalisierte Diagonale des Viewports, nicht auf das gefüllte Element.
animVal ist schreibgeschützt; Schreibversuche lösen eine NoModificationAllowedError-Ausnahme aus.

Siehe auch

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