The <radialGradient> SVG element lets authors define radial gradients to fill or stroke graphical elements.

Usage context

CategoriesGradient element
Permitted contentAny number of the following elements, in any order:
Descriptive elements
<animate>, <animateTransform>, <set>, <stop>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGRadialGradientElement interface.

Example

SVG

<svg width="120" height="120" viewBox="0 0 120 120"
   xmlns="http://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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1.5993.1
cx ? ? ? ? ? ?
cy ? ? ? ? ? ?
r ? ? ? ? ? ?
fx ? ? ? ? ? ?
fy ? ? ? ? ? ?
fr ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ?
gradientTransform ? ? ? ? ? ?
href ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ?
xlink:href ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support31 Yes4 Yes3.1 ?
cx ? ? ? ? ? ? ?
cy ? ? ? ? ? ? ?
r ? ? ? ? ? ? ?
fx ? ? ? ? ? ? ?
fy ? ? ? ? ? ? ?
fr ? ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ? ?
gradientTransform ? ? ? ? ? ? ?
href ? ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ? ?
xlink:href ? ? ? ? ? ? ?

See also

Document Tags and Contributors

 Last updated by: fscholz,