SVGRadialGradientElement.r — Eigenschaft · JavaScript-Referenz

Signatur

SVGRadialGradientElement.r

Beschreibung

Die Eigenschaft r der Schnittstelle SVGRadialGradientElement gibt den Radius des Endkreises eines radialen Gradienten zurück. Sie entspricht dem SVG-Attribut r des Elements <radialGradient>. Fehlt das Attribut, gilt der Standardwert 50%.

Zurückgegeben wird kein einfacher Zahlenwert, sondern ein SVGAnimatedLength-Objekt. Über r.baseVal kommt man an den statischen Grundwert (ein SVGLength), über r.animVal an den aktuell animierten Wert, etwa während einer SMIL-Animation mit <animate>.

Die Eigenschaft selbst ist schreibgeschützt: gradient.r = 30 hat keine Wirkung. Den Radius ändert man über r.baseVal.value, r.baseVal.newValueSpecifiedUnits() oder direkt mit setAttribute('r', …). Wie Prozentwerte ausgelegt werden, hängt von gradientUnits ab. Bei objectBoundingBox (Standard) bezieht sich der Wert auf den Begrenzungsrahmen des gefüllten Elements, bei userSpaceOnUse auf das Benutzerkoordinatensystem.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (statischer Radius als SVGLength) und animVal (aktuell animierter Radius, schreibgeschützt).

Beispiele

Radius auslesen

document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="200">
  <defs>
    <radialGradient id="glow" r="40%">
      <stop offset="0" stop-color="gold"/>
      <stop offset="1" stop-color="navy"/>
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#glow)"/>
</svg>`);

const gradient = document.getElementById('glow');
const { baseVal } = gradient.r;

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

40% 40 true

Radius per Schieberegler ändern

const gradient = document.querySelector('#glow');
const slider = document.createElement('input');
Object.assign(slider, { type: 'range', min: 5, max: 100, value: 40 });
document.body.append(slider);

slider.addEventListener('input', () => {
  // Einheit Prozent beibehalten, nur den Zahlenwert setzen
  gradient.r.baseVal.newValueSpecifiedUnits(
    SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
    Number(slider.value)
  );
  console.log(gradient.getAttribute('r'));
});

z. B. 65% (beim Verschieben des Reglers)

Animierten Wert und Grundwert vergleichen

const gradient = document.querySelector('#glow');
const anim = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
anim.setAttribute('attributeName', 'r');
anim.setAttribute('values', '10%;60%;10%');
anim.setAttribute('dur', '2s');
anim.setAttribute('repeatCount', 'indefinite');
gradient.append(anim);

setTimeout(() => {
  console.log('Grundwert:', gradient.r.baseVal.valueAsString);
  console.log('Animiert:', gradient.r.animVal.valueAsString);
}, 500);

Grundwert: 40% Animiert: ca. 35% (Wert der laufenden Animation; je nach Browser kann animVal auch gleich baseVal sein)

// Wichtig · Fallstricke

Schreibgeschützt: Eine direkte Zuweisung an r wird ignoriert und wirft im Strict-Mode einen TypeError. Änderungen gehen über r.baseVal oder setAttribute('r', …).
Einheiten: Wer baseVal.value setzt, gibt einen Wert in Benutzereinheiten an, und die Einheit wechselt dabei eventuell von Prozent zu Zahl. Soll die Einheit erhalten bleiben, nimmt man newValueSpecifiedUnits().
Prozent und Begrenzungsrahmen: Das Auslesen von baseVal.value bei Prozentwerten kann einen Fehler werfen oder unerwartete Werte liefern, weil der Bezugsrahmen je nach gradientUnits nicht eindeutig ist. Deshalb besser valueInSpecifiedUnits verwenden.
animVal: Einige Browser geben für animVal weiterhin den Grundwert zurück, statt den laufenden SMIL-Wert widerzuspiegeln.
Randfälle: Bei r="0" wird die Fläche in der Farbe des letzten <stop> gefüllt. Negative Werte sind ein Fehler.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Das Attribut href (Vererbung über Verweise) wird nicht in r aufgelöst, denn die Eigenschaft liefert nur das eigene Attribut des Elements.

Siehe auch

SVGRadialGradientElement SVGRadialGradientElement.cx SVGRadialGradientElement.cy SVGRadialGradientElement.fr SVGRadialGradientElement.fx SVGAnimatedLength SVGLength SVGGradientElement