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

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