The SVG <stop>
element defines a color and its position to use on a gradient. This element is always a child of a <linearGradient>
or <radialGradient>
element.
html,body,svg { height:100% }
<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
offset
- This attribute defines where the gradient stop is placed along the gradient vector.
Value type: <number>|<percentage>; Default value:0
; Animatable: yes stop-color
- This attribute defines the color of the gradient stop. It can be used as a CSS property.
Value type:currentcolor
|<color>|<icccolor>; Default value:black
; Animatable: yes stop-opacity
- This attribute defines the opacity of the gradient stop. It can be used as a CSS property.
Value type: <opacity>; Default value:1
; Animatable: yes
Global attributes
- Core Attributes
- Most notably:
id
- Styling Attributes
class
,style
- Event Attributes
- Global event attributes, Document element event attributes
- Presentation Attributes
- Most notably:
color
,display
,stop-color
,stop-opacity
,visibility
Usage notes
Categories | Gradient element |
---|---|
Permitted content | Any number of the following elements, in any order:<animate> , <animateColor> , <set> |
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<stop>' in that specification. |
Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<stop>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
stop | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
offset | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
stop-color | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
stop-opacity | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support