<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.
L'élément SVG <stop>
définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément <linearGradient>
ou <radialGradient>
.
Contexte d'utilisation
Attributs
Attributs globaux
Specific attributes
DOM Interface
Cet élément implémenté l'interface SVGStopElement
.
Exemple
SVG
html
<svg
width="160"
height="95"
viewBox="0 0 80 40"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<!-- Contour de la zone de dessin en noir -->
<rect fill="none" stroke="black" x="0.5" y="0.5" width="79" height="39" />
<!-- Le rectangle est rempli avec un dégradé linéaire -->
<rect
fill="url(#MyGradient)"
stroke="black"
stroke-width="1"
x="10"
y="10"
width="60"
height="20" />
</svg>
Résultat
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # GradientStops |
Compatibilité des navigateurs
BCD tables only load in the browser