SVG fr Attribute
The fr attribute defines the radius of the focal point for the linear gradient.
Syntax:
fr="radius"
Attribute Values:
- length: Length at which we want to set the radius.
- percentage: Percentage at which we want to set the radius.
We will use the fr attribute for setting the radius of the element.
Example 1:
HTML
<!DOCTYPE html><html> <body> <svg viewBox="0 0 600 200" <defs> <radialGradient id="gradient1" cx="0.3" cy="0.3" r="0.5" fx="0.55" fy="0.35" fr="20%"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="green" /> </radialGradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> </svg></body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html><html> <body> <svg viewBox="0 0 600 200" <defs> <radialGradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="green" /> </radialGradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> </svg></body> </html> |
Output:
Please Login to comment...