"<radialGradient>"

Defines the paint server for a radial gradients.

• DOM object: SVGRadialGradientElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#RadialGradients

These elements are typically placed within a "<defs>" element, and then referenced by id from a fill or stroke attribute.

<radialGradient id="MyGradient">
  <stop offset="0%" stop-color="blue" />
  <stop offset="100%" stop-color="yellow" />
</radialGradient>

To reference it with a fill:

<rect fill="url(#MyGradient)" width="300" height="300" />

Valid child elements: "<stop>"

See also

"<linearGradient>", "<stop>"

Attribute	Default	Description
cx	50%	Center X coordinate, for the outer circle.
cy	50%	Center Y coordinate, for the outer circle.
r	50%	Radius of the outer circle.
fx	cx	Focal point X coordinate.
fy	cy	Focal point Y coordinate.

| fr | 0 | Focal point radius. | * | gradientUnits | objectBoundingBox | The coordinate system for the gradient, either userSpaceOnUse or objectBoundingBox. | | gradientTransform | (none) | A transform to apply to the gradient. | | spreadMethod | pad | How to handle colors outside the gradient. Either pad, reflect, or repeat. | | href | (none) | A URL reference to a template gradient element, which is then used as a template for this gradient. Example: <radialGradient id="MyGradient" href="#MyGradient2" /> |