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 linear gradients to apply to other SVG elements.
Usage context
Categories | Gradient element |
---|---|
Permitted content | Any number of the following elements, in any order: Descriptive elements , , , , , ,
|
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:
; 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 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:
; 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:
; Default value: 100%
; Animatable: yes xlink:href
Deprecated-
An
reference to another
element that will be used as a template. Value type:; 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:
; 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:
; Default value: 0%
; Animatable: yes
DOM Interface
This element implements the SVGLinearGradientElement
interface.
Example
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # LinearGradientElement |