<radialGradient>
The <radialGradient>
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.
Example
html
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="myGradient">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
Attributes
cx
-
This attribute defines the x coordinate of the end circle of the radial gradient. Value type: <length> ; Default value:
50%
; Animatable: yes cy
-
This attribute defines the y coordinate of the end circle of the radial gradient. Value type: <length> ; 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%
<stop>
is mapped to the perimeter of the start circle. Value type: <length> ; Default value:0%
; Animatable: yes fx
-
This attribute defines the x coordinate of the start circle of the radial gradient. Value type: <length> ; Default value: Same as
cx
; Animatable: yes fy
-
This attribute defines the y coordinate of the start circle of the radial gradient. Value type: <length> ; 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: <transform-list> ; Default value: identity transform; Animatable: yes
href
-
This attribute defines a reference to another
<radialGradient>
element that will be used as a template. Value type: <URL> ; 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%
<stop>
is mapped to the perimeter of the end circle. Value type: <length> ; 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 <IRI> reference to another
<radialGradient>
element that will be used as a template. Value type: <IRI> ; Default value: none; Animatable: yes
Global attributes
- Core Attributes
-
Most notably:
id
- Styling Attributes
class
,style
- Event Attributes
- Presentation Attributes
-
Most notably:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- XLink Attributes
xlink:href
Deprecated ,xlink:title
Usage notes
Categories | Gradient element |
---|---|
Permitted content | Any number of the following elements, in any order: Descriptive elements <animate> , <animateTransform> , <set> , <stop> |
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RadialGradients |
Browser compatibility
BCD tables only load in the browser