Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The
SVG element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
Note:
Don't be confused with CSS radial-gradient()
as CSS gradients can only apply to HTML elements where SVG gradient can only apply to SVG elements.
Usage context
Categories | Gradient element |
---|---|
Permitted content | Any number of the following elements, in any order: Descriptive elements , , , , , ,
|
Attributes
cx
-
This attribute defines the x coordinate of the end circle of the radial gradient. Value type:
; Default value: 50%
; Animatable: yes cy
-
This attribute defines the y coordinate of the end circle of the radial gradient. Value type:
; Default value: 50%
; Animatable: yes fr
-
This attribute defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0%
is mapped to the perimeter of the start circle. Value type:; Default value: 0%
; Animatable: yes fx
-
This attribute defines the x coordinate of the start circle of the radial gradient. Value type:
; Default value: Same as cx
; Animatable: yes fy
-
This attribute defines the y coordinate of the start circle of the radial gradient. Value type:
; Default value: Same as cy
; Animatable: yes gradientUnits
-
This attribute defines the coordinate system for attributes
cx
,cy
,r
,fx
,fy
,fr
Value type:userSpaceOnUse
|objectBoundingBox
; Default value:objectBoundingBox
; Animatable: yes gradientTransform
-
This attribute provides additional transformation to the gradient coordinate system. Value type:
; Default value: identity transform; Animatable: yes href
-
This attribute defines a reference to another
element that will be used as a template. Value type:; Default value: none; Animatable: yes r
-
This attribute defines the radius of the end circle of the radial gradient. The gradient will be drawn such that the 100%
is mapped to the perimeter of the end circle. Value type:; Default value: 50%
; Animatable: yes spreadMethod
-
This attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. Value type:
pad
|reflect
|repeat
; Default value:pad
; Animatable: yes xlink:href
Deprecated-
An
reference to another
element that will be used as a template. Value type:; Default value: none; Animatable: yes
DOM Interface
This element implements the SVGRadialGradientElement
interface.
Example
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RadialGradientElement |