The <radialGradient> SVG element lets authors define radial gradients to fill or stroke graphical elements.
Usage context
| Categories | Gradient element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Descriptive elements <animate>, <animateTransform>, <set>, <stop> |
Attributes
Global attributes
- Core attributes »
- Presentation attributes »
- Xlink attributes »
classstyleexternalResourcesRequired
Specific attributes
DOM Interface
This element implements the SVGRadialGradientElement interface.
Example
SVG
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="https://www.w3.org/2000/svg">
<defs>
<radialGradient id="exampleGradient">
<stop offset="10%" stop-color="gold"/>
<stop offset="95%" stop-color="green"/>
</radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
</svg>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of '<radialGradient>' in that specification. |
Candidate Recommendation | Added fr attribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<radialGradient>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.5 (1.8) | 9.0 | 9.0 | 3.0.4[1] |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0 | 1.0 (1.8) | No support | (Yes) | 3.0.4[1] |
The chart is based on these sources.
[1] WebKit doesn't support color interpolation (WebKit bug 6034).