<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

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

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

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # RadialGradients

Compatibilité des navigateurs

BCD tables only load in the browser