<radialGradient>
================

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>` (en-US)

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>` (en-US)

Valeur par défaut

`50%`

Peut être animé

Oui


`fr` (en-US)

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>` (en-US)

Valeur par défaut

`0%`

Peut être animé

Oui


`fx` (en-US)

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

Type de valeur

`<length>` (en-US)

Valeur par défaut

La même que celle de `cx`

Peut être animé

Oui


`fy` (en-US)

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

Type de valeur

`<length>` (en-US)

Valeur par défaut

La même que celle de `cy`

Peut être animé

Oui


`gradientUnits` (en-US)

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` (en-US)

Cet attribut fournit des transformations supplémentaires au système de coordonnées utilisé par le dégradé.

Type de valeur

`<transform-list>` (en-US)

Valeur par défaut

La transformation identité

Peut être animé

Oui


`href` (en-US)

Cet attribut définit une référence à un autre élément `<radialGradient>` qui sera utilisé comme modèle.

Type de valeur

`<URL>` (en-US)

Valeur par défaut

Aucune

Peut être animé

Oui


`r` (en-US)

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>` (en-US)

Valeur par défaut

`50%`

Peut être animé

Oui


`srpeadMethod` (en-US)

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` (en-US)

**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>` (en-US) à un autre élément `<radialGradient>` qui pourra être utilisé comme modèle.

Type de valeur

`<IRI>` (en-US)

Valeur par défaut

none

Peut être animé

Oui


### Attributs universels

Attributs fondamentaux

Notamment `id` (en-US)

Attributs de mise en forme

`class` (en-US), `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` (en-US), `color`, `color-interpolation` (en-US), `color-rendering`, `cursor` (en-US), `display` (en-US), `fill`, `fill-opacity`, `fill-rule`, `filter` (en-US), `mask`, `opacity` (en-US), `pointer-events` (en-US), `shape-rendering` (en-US), `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect` (en-US), `visibility` (en-US)

Attributs `xlink`

`xlink:href` (en-US), `xlink:title` (en-US)

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>` (en-US), `<stop>` |

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradients |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.