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:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...