The fr
attribute defines the radius of the focal point for the radial gradient.
You can use this attribute with the following SVG elements:
The fr
attribute defines the radius of the focal point for the radial gradient.
You can use this attribute with the following SVG elements:
fr
The following example presents two circles: the first one has fr
set to 5%
while the other circle has fr
set to 25%
.
<svg viewBox="0 0 480 200" width="420" height="160" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="darkseagreen" /> </radialGradient> <radialGradient id="gradient2" 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="darkseagreen" /> </radialGradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translateX(240px);" /> </svg>
(fx, fy)
This example has fr
equal to 5%
and is representing how the attributes fx
and fy
(the points labeled as such in the SVG) act as the origin for the focal point of the radial gradient. This focal point is a circle whose radius (the value of fr
) defines when the first color stop, in this case the color red, should start transitioning into the other color stop, which in this case is the color blue.
<svg viewBox="0 0 120 120" width="165" height="165" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </radialGradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient)" stroke="black" stroke-width="2" /> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2" /> <circle cx="45" cy="45" r="2" fill="white" stroke="white" /> <circle cx="60" cy="60" r="2" fill="white" stroke="white" /> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt"> (fx,fy) </text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt"> (cx,cy) </text> </svg>
Value | <length> |
---|---|
Default value | 0 |
Animatable | None |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
fr |
No | No | No | No | No | No | No | No | No | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fr