Description of the <radialGradient> element
The <radialGradient> element specifies an SVG radial gradient that can be applied to fill and stroke graphical elements.
The <radialGradient> element must be nested inside a <defs> element which is a short for definitions. The <defs> element contains definition of specific elements (e.g., gradients).
Do not confuse an SVG radial gradient with the CSS radial-gradient property. CSS gradients only apply to HTML elements, whereas the SVG gradient only applies to SVG elements.
Example of the SVG <radialGradient> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<defs>
<radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(245,245,245);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(144, 238, 144);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| cx | Specifies the x coordinate of the end circle for the gradient. |
| cy | Specifies the y coordinate of the end circle for the gradient. |
| r | Specifies the radius of the end circle for the gradient. |
| fr | Specifies the radius of the start circle for the gradient. |
| fx | Specifies the x coordinate of the start circle for the gradient. |
| fy | Specifies the y coordinate of the start circle for the gradient. |
| gradientUnits | Specifies the coordinate system for the following attributes: cx, cy, r, fx,fy, and fr. |
| gradientTransform | Gives additional transformation to the coordinate system of the gradient. |
| href | A URL reference to a different “radialGradient” or a “linearGradient” element. |
| spreadMethod | Specifies how the gradient behaves when it starts or ends within the bounds of the objects containing the gradient. |
The SVG <radialGradient> element also supports the Global Attributes and Event Attributes.
Practice Your Knowledge
What are the attributes of the 'radialGradient' element in SVG?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.