<radialGradient>
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 <radialGradient>
permet de définir des dégradés radiaux qui peuvent être appliqués aux éléments de remplissage ou de contour des éléments graphiques.
Note :
Il ne faut pas confondre cet élément avec la fonction CSS radial-gradient()
. En effet, les dégradés CSS s'appliquent uniquement aux éléments HTML, là où les dégradés SVG s'appliquent uniquement aux éléments SVG.
Exemple
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="monDegrade">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<!-- on utilise le dégradé radial déclaré plus haut -->
<circle cx="5" cy="5" r="4" fill="url('#monDegrade')" />
</svg>
Attributs
cx
-
Cet attribut définit l'abscisse du cercle extérieur pour le dégradé radial.
cy
-
Cet attribut définit l'ordonnée du cercle extérieur pour le dégradé radial.
fr
-
Cet attribut définit le rayon du cercle intérieur du dégradé radial. Le dégradé sera dessiné de tel façon à ce que l'arrêt de dégradé (
<stop>
) situé au niveau 0% corresponde au périmètre du cercle intérieur. fx
-
Cet attribut définit l'abscisse du cercle intérieur pour le dégradé radial.
- Type de valeur
- Valeur par défaut
-
La même que celle de
cx
- Peut être animé
-
Oui
fy
-
Cet attribut définit l'ordonnée du cercle intérieur pour le dégradé radial.
- Type de valeur
- Valeur par défaut
-
La même que celle de
cy
- Peut être animé
-
Oui
gradientUnits
-
Cet attribut définit le système de coordonnées pour les attributs
cx
,cy
,r
,fx
,fy
, etfr
.- Type de valeur
-
userSpaceOnUse
|objectBoundingBox
- Valeur par défaut
-
objectBoundingBox
- Peut être animé
-
Oui
gradientTransform
-
Cet attribut fournit des transformations supplémentaires au système de coordonnées utilisé par le dégradé.
- Type de valeur
- Valeur par défaut
-
La transformation identité
- Peut être animé
-
Oui
href
-
Cet attribut définit une référence à un autre élément
<radialGradient>
qui sera utilisé comme modèle.- Type de valeur
- Valeur par défaut
-
Aucune
- Peut être animé
-
Oui
r
-
Cet attribut définit le rayon du cercle extérieur du dégradé radial. Le dégradé sera dessiné de tel façon à ce que l'arrêt de dégradé (
<stop>
) situé au niveau 100% corresponde au périmètre du cercle extérieur. srpeadMethod
-
Cet attribut indique la façon dont le dégradé se comporte s'il démarre ou finit à l'intérieur des limites de la forme contenant le dégradé.
- Type de valeur
-
pad
|reflect
|repeat
- Valeur par défaut
-
pad
- Peut être animé
-
Oui
href
-
Une référence
Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
<IRI>
à un autre élément<radialGradient>
qui pourra être utilisé comme modèle.
Attributs universels
- Attributs fondamentaux
-
Notamment
id
- Attributs de mise en forme
- Attributs pour les évènements
-
Attributs d'évènements universels, attributs relatifs aux évènements du document
- Attributs de présentation
-
Notamment
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- Attributs
xlink
Notes 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> |
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RadialGradients |
Compatibilité des navigateurs
BCD tables only load in the browser