<radialGradient>

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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

html,
body,
svg {
  height: 100%;
}

html

<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.

Type de valeur: <length>
Valeur par défaut: 50%
Peut être animé: Oui

cy

Cet attribut définit l'ordonnée du cercle extérieur pour le dégradé radial.

Type de valeur: <length>
Valeur par défaut: 50%
Peut être animé: Oui

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.

Type de valeur: <length>
Valeur par défaut: 0%
Peut être animé: Oui

fx

Cet attribut définit l'abscisse du cercle intérieur pour le dégradé radial.

Type de valeur: <length>
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: <length>
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, et fr.

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: <transform-list>
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: <URL>
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.

Type de valeur: <length>
Valeur par défaut: 50%
Peut être animé: Oui

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

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Une référence <IRI> à un autre élément <radialGradient> qui pourra être utilisé comme modèle.

Type de valeur: <IRI>
Valeur par défaut: none
Peut être animé: Oui

Attributs universels

Attributs fondamentaux: Notamment id
Attributs de mise en forme: class, style
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: xlink:href, xlink:title

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>`, `<discard>`, `<script>`, `<set>`, `<stop>`, `<style>`

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # RadialGradientElement

Compatibilité des navigateurs

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨7 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content