stop
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
A rampa de cores para utilizar em um gradiente é definido pelo elemento stop
que é elemento filho do elemento <linearGradient>
ou do elemento <radialGradient>
.
Contexto de uso
Exemplo
html
<svg
width="100%"
height="100%"
viewBox="0 0 80 40"
xmlns="https://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<!-- Outline the drawing area in black -->
<rect fill="none" stroke="black" x="0.5" y="0.5" width="79" height="39" />
<!-- The rectangle is filled using a linear gradient -->
<rect
fill="url(#MyGradient)"
stroke="black"
stroke-width="1"
x="10"
y="10"
width="60"
height="20" />
</svg>
Resultado:
Atributos
Atributos globais
Atributos específicos
Interface DOM
Este elemento implementa a interface do SVGStopElement
.
Compatibilidade com navegadores
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
stop | ||||||||||||
offset |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
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.