<linearGradient>
The <linearGradient>
element lets authors define linear gradients to apply to other 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>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
Attributes
gradientUnits
-
This attribute defines the coordinate system for attributes
x1
,x2
,y1
,y2
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
<linearGradient>
element that will be used as a template. Value type: <URL> ; Default value: none; 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 x1
-
This attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type:
<length-percentage>
|<number>
; Default value:0%
; Animatable: yes x2
-
This attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type:
<length-percentage>
|<number>
; Default value:100%
; Animatable: yes xlink:href
Deprecated-
An <IRI> reference to another
<linearGradient>
element that will be used as a template. Value type: <IRI> ; Default value: none; Animatable: yes y1
-
This attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type:
<length-percentage>
|<number>
; Default value:0%
; Animatable: yes y2
-
This attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type:
<length-percentage>
|<number>
; Default value:0%
; 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 # LinearGradients |
Browser compatibility
BCD tables only load in the browser