W3cubDocs

/SVG

<radialGradient>

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

Specific attributes

DOM Interface

This element implements the SVGRadialGradientElement interface.

Example

SVG

<svg width="120" height="120" viewBox="0 0 240 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>
    <radialGradient spreadMethod="reflect"
                    cx="50%"
                    cy="50%"
                    r="50%"
                    fx="25%"
                    fy="75%"
                    fr="10%"
                   id="flameGradient">
      <stop offset="0%" stop-color="white"/>
      <stop offset="10%" stop-color="yellow"/>
      <stop offset="95%" stop-color="red"/>
    </radialGradient>
  </defs> 
  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>  
  <circle fill="url(#flameGradient)" cx="180" 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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1.5 9 9 3.1
cx ? ? ? ? ? ?
cy ? ? ? ? ? ?
r ? ? ? ? ? ?
fx ? ? ? ? ? ?
fy ? ? ? ? ? ?
fr ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ?
gradientTransform ? ? ? ? ? ?
href ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ?
xlink:href ? ? ? ? ? ?
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 3 18 Yes 4 Yes 3.1 ?
cx ? ? ? ? ? ? ?
cy ? ? ? ? ? ? ?
r ? ? ? ? ? ? ?
fx ? ? ? ? ? ? ?
fy ? ? ? ? ? ? ?
fr ? ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ? ?
gradientTransform ? ? ? ? ? ? ?
href ? ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ? ?
xlink:href ? ? ? ? ? ? ?

See also

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient