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

An SVGAnimatedLength.

Example

Given the following SVG, with two identical gradients declared with different unit types:

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>
    <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:

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

console.dir(frGradient1.baseVal.unitType); // output: 1
console.dir(frGradient1.baseVal.value); // output: 0.5
console.dir(frGradient1.baseVal.valueInSpecifiedUnits); // output: 0.5

console.dir(frGradient2.baseVal.unitType); // output: 2
console.dir(frGradient2.baseVal.value); // output: 79.05693817138672
console.dir(frGradient2.baseVal.valueInSpecifiedUnits); // output: 50

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGRadialGradientElement__fr

Browser compatibility

See also