SVGRadialGradientElement: fr-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
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:
<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:
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
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGRadialGradientElement__fr |