radialGradient

The radialGradient SVG element specifies radial gradients.

Syntax

Attributes

cx

Specifies the x-coordinate for the end circle of the radial gradient.

Value
<length>
Default
50%

cy

Specifies the y-coordinate for the end circle of the radial gradient.

Value
<length>
Default
50%

fr

Specifies the radius for the start circle of the radial gradient.

Value
<length>
Default
0%

fx

Specifies the x-coordinate for the start circle of the radial gradient.

Value
<length>
Default
(cx)

fy

Specifies the y-coordinate for the start circle of the radial gradient.

Value
<length>
Default
(cy)

gradientTransform

Specifies an optional additional transformation from the gradient coordinate system onto the target coordinate system.

Value
<transform-list>
Default
identity transform

gradientUnits

Specifies the coordinate system for attributes cx, cy, r, fx, fy, and fr.

Value
objectBoundingBox | userSpaceOnUse
Default
objectBoundingBox

href

Specifies a Uniform Resource Locator (URL) reference to the element.

Value
<url>
Default
(none)

r

Specifies the radius for the end circle of the radial gradient.

Value
<length>
Default
50%

spreadMethod

Specifies what happens if the gradient starts or ends inside the bounds of the target.

Value
pad | reflect | repeat
Default
pad

Examples

cx

<length>

cy

<length>

fr

<length>

fx

<length>

fy

<length>

gradientTransform

<transform-list>

gradientUnits

objectBoundingBox

userSpaceOnUse

href

<url>

r

<length>

spreadMethod

pad

reflect

repeat

Internal

linearGradient

stop

External

World Wide Web Consortium (W3C)

Home Menu