<linearGradient>

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.

* Some parts of this feature may have varying levels of support.

L'élément <linearGradient> permet de définir des dégradés linéaires, qui pourront être utilisés comme remplissage ou contour des éléments SVG.

Contexte d'utilisation

CatégoriesÉlément de dégradé
Contenu autoriséTout élément de cette liste, quel qu'en soit l'ordre :
Éléments descriptifs
<animate>, <animateTransform>, <script>, <set>, <stop>, <style>

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

Cet élément implémente l'interface SVGLinearGradientElement.

Exemple

html
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="green" />
      <stop offset="95%" stop-color="gold" />
    </linearGradient>
  </defs>

  <rect fill="url(#MyGradient)" x="10" y="10" width="100" height="100" />
</svg>

Spécifications

Specification
Scalable Vector Graphics (SVG) 2
# LinearGradientElement

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi