<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
-
An <IRI> reference to another
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
<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
,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