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.
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.
<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>
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
Most notably: id
class
, style
Most notably: color
, display
, stop-color
, stop-opacity
, visibility
Specification |
---|
Scalable Vector Graphics (SVG) 2 # GradientStops |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
stop |
1 | 12 | 1.5 | 9 | 9 | 3 | 3 | 18 | 4 | Yes | 3 | 1.0 |
offset |
1 | 12 | 1.5 | 9 | 9 | 3 | 3 | 18 | 4 | Yes | 3 | 1.0 |
stop-color |
1 | 12 | 1.5 | 9 | 9 | 3 | 3 | 18 | 4 | Yes | 3 | 1.0 |
stop-opacity |
1 | 12 | 1.5 | 9 | 9 | 3 | 3 | 18 | 4 | Yes | 143–11 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop