fx
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 fx attribute defines the x-axis coordinate of the focal point for a radial gradient.
You can use this attribute with the following SVG elements:
Example
html,
body,
svg {
height: 100%;
}
html
<svg viewBox="0 0 480 200" 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.75"
fy="0.35"
fr="5%">
<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="340" cy="100" r="100" fill="url(#gradient2)" />
</svg>
[フレーム]
Usage notes
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFXAttribute |
Browser compatibility
Enable JavaScript to view this browser compatibility table.