SVGRadialGradientElement: fr property
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.
The fr read-only property of the SVGRadialGradientElement interface describes the radius of the focal circle of the radial gradient as an SVGAnimatedLength. It reflects the computed value of the fr attribute on the <radialGradient> element.
The attribute value is a <length>, <percentage>, or <number>. The numeric value of the SVGAnimatedLength.baseVal is the radius of the focal point of the radial gradient in the user coordinate system.
Value
Example
Given the following SVG, with two identical gradients declared with different unit types:
<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>
We can access the fr attributes' unit type, value, and value as specified without the unit type:
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
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGRadialGradientElement__fr |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fr
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support