<stop>
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.
The <stop> SVG element defines a color and its position to use on a gradient. This element is always a child of a <linearGradient> or <radialGradient> element.
Usage context
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: <color>; 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-value>; Default value:
1; Animatable: yes
DOM Interface
This element implements the SVGStopElement interface.
Example
<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> Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StopElement |