SVG Radial
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 stands for definitions. The <defs> element contains definitions of specific elements (e.g., gradients).
DANGER
Do not confuse an SVG radial gradient with the CSS radial-gradient function. CSS gradients can be applied to the background of any element, whereas SVG gradients only apply to SVG elements.
Example of the SVG <radialGradient> element:
Example of the SVG <radialGradient> element
html
<!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%">
<!-- Center: transparent -->
<stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
<!-- Edge: solid light green -->
<stop offset="100%" 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. |
| 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 cx, cy, r, fx, and fy. Values: objectBoundingBox (default) or userSpaceOnUse. |
| 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. Values: pad, repeat, or reflect. |
The SVG <radialGradient> element also supports the Global Attributes and Event Attributes.
Practice
What are the attributes of the 'radialGradient' element in SVG?