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 de base »
- Références des attributs SVG »
- Attributs Xlink »
classstyleexternalResourcesRequired
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).