W3docs
fr
Se connecter

SVG Linéaire

On this page, you can find useful information about the SVG <linear> element, learn about the linear gradients, see examples, and create one for yourself.

Description des dégradés SVG

Un dégradé est une transition fluide d'une couleur à une autre. Il est possible d'appliquer plusieurs transitions de couleur sur un même élément.

Il existe deux principaux types de dégradés en SVG :

  • linéaire
  • radial

L'élément <linearGradient>

L'élément <linearGradient> spécifie les dégradés linéaires qui remplissent les éléments graphiques. Il doit être imbriqué à l'intérieur d'une balise <defs> qui contient la définition d'éléments particuliers, comme les dégradés.

Les dégradés linéaires peuvent être horizontaux, verticaux ou angulaires :

  • Dégradés horizontaux - y1 et y2 sont égaux, et x1 et x2 diffèrent.
  • Dégradés verticaux - x1 et x2 sont égaux, et y1 et y2 diffèrent.
  • Dégradés angulaires - x1 et x2 varient, et y1 et y2 diffèrent également.

danger

Ne confondez jamais un dégradé linéaire SVG avec la propriété CSS radial-gradient. Les dégradés CSS s'appliquent aux éléments HTML, tandis que les dégradés SVG s'appliquent aux éléments SVG.

Exemple de l'élément <linearGradient> pour créer une ellipse avec un dégradé linéaire horizontal :

Exemple de l'élément <linearGradient> pour créer une ellipse avec un dégradé linéaire horizontal

<!DOCTYPE html>
<html>
  <body>
    <svg height="200" width="300">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
    </svg>
  </body>
</html>
Essayez vous-même »

Exemple de l'élément <linearGradient> pour créer une ellipse avec un dégradé linéaire vertical :

Exemple de l'élément <linearGradient> pour créer une ellipse avec un dégradé linéaire vertical

<!DOCTYPE html>
<html>
  <body>
    <svg height="300" width="400">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
    </svg>
  </body>
</html>
Essayez vous-même »

Attributs

ValeurDescription
gradientUnitsCet attribut spécifie le système de coordonnées pour les attributs x1, x2, y1, y2. Valeurs : userSpaceOnUse, objectBoundingBox.
gradientTransformCet attribut applique une transformation supplémentaire au système de coordonnées du dégradé.
hrefCet attribut spécifie une référence vers un autre élément <linearGradient>.
spreadMethodCet attribut spécifie le comportement du dégradé s'il commence ou se termine à l'intérieur des limites de la forme qui le contient. Valeurs : pad, repeat, reflect.
x1Cet attribut spécifie la coordonnée x du point de départ du vecteur de dégradé le long duquel le dégradé linéaire est tracé.
x2Cet attribut spécifie la coordonnée x du point d'arrivée du vecteur de dégradé le long duquel le dégradé linéaire est tracé.
y1Cet attribut spécifie la coordonnée y du point de départ du vecteur de dégradé le long duquel le dégradé linéaire est tracé.
y2Cet attribut spécifie la coordonnée y du point d'arrivée du vecteur de dégradé le long duquel le dégradé linéaire est tracé.

L'élément SVG <linearGradient> prend également en charge les Attributs globaux et les Attributs d'événement.

Pratique

Pratique

Quelles sont les utilisations des attributs 'x1', 'y1', 'x2' et 'y2' dans un dégradé linéaire SVG en HTML ?