<radialGradient>

L'élément SVG <radialGradient> permet de définir un dégradé radial afin de dessiner un contour, ou de remplir 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>, <set>, <stop>

Attributs

Attributs globaux

Attributs spécifiques

DOM Interface

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

Exemple

SVG

<svg width="120" height="120" viewBox="0 0 120 120"
   xmlns="http://www.w3.org/2000/svg">

  <defs>
    <radialGradient id="exampleGradient">
      <stop offset="10%" stop-color="gold"/>
      <stop offset="95%" stop-color="green"/>
    </radialGradient>
  </defs>

  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
</svg>

Résultat

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de '<radialGradient>' dans cette spécification.		 Candidat au statut de recommandation Added fr attribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<radialGradient>' dans cette spécification.		 Recommendation Initial definition

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Feature Chrome Edge Firefox (Gecko) IE Opera Safari
Basic support 1.0 (Oui) 1.5 (1.8) 9.0 9.0 3.0.4[1]
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 (Oui) 1.0 (1.8) Pas de support (Oui) 3.0.4[1]

Le tableau est basé sur ces ressources.

[1] WebKit ne supporte pas l'interpolation des couleurs (WebKit bug 6034).

Voir aussi