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 Januar 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:
<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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGRadialGradientElement__fr |
Browser-Kompatibilität
Loading…