SVGRadialGradientElement: fr-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die fr-Eigenschaft der SVGRadialGradientElement-Schnittstelle beschreibt den Radius des Fokus-Kreises des radialen Verlaufs als ein SVGAnimatedLength. Sie spiegelt den berechneten Wert des fr-Attributs auf dem <radialGradient>-Element wider.

Der Attributwert ist ein \<length>, \<percentage> oder \<number>. Der numerische Wert von SVGAnimatedLength.baseVal ist der Radius des Fokuspunktes des radialen Verlaufs im Benutzerkoordinatensystem.

Wert

Ein SVGAnimatedLength.

Beispiel

Das folgende SVG enthält zwei identische Verläufe, die mit unterschiedlichen Einheitstypen deklariert sind:

html
<svg viewBox="0 0 200 100" width="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="gradient1" r="20%" fr="0.5">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="gradient2" r="20%" fr="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="yellow" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="url(#gradient1)" />
  <rect x="100" y="0" width="100" height="100" fill="url(#gradient2)" />
</svg>

Wir können auf die Einheitstypen, Werte und Werte der fr-Attribute zugreifen, wie sie ohne Einheitstyp angegeben sind:

js
const radialGradients = document.querySelectorAll("radialGradient");
const frGradient1 = radialGradients[0].fr;
const frGradient2 = radialGradients[1].fr;

console.log(frGradient1.baseVal.unitType); // 1 (SVGLength.SVG_LENGTHTYPE_NUMBER)
console.log(frGradient1.baseVal.value); // 0.5
console.log(frGradient1.baseVal.valueInSpecifiedUnits); // 0.5

console.log(frGradient2.baseVal.unitType); // 2 (SVGLength.SVG_LENGTHTYPE_PERCENTAGE)
console.log(frGradient2.baseVal.value); // 79.05693817138672
console.log(frGradient2.baseVal.valueInSpecifiedUnits); // 50

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGRadialGradientElement__fr

Browser-Kompatibilität

Siehe auch