SVG : formes remplies avec des dégradés

Quatre rectangles remplis avec des dégradés linéaires

balise lineargradient de SVG

Le code SVG correspondant

<svg viewBox ="0 0 700 700" width = '100%' height = '100%'> <defs> <lineargradient id="diagonal_bas" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> <lineargradient id="diagonal_haut" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> <lineargradient id="horizontal"> <stop offset="0%" stop-color="olive" /> <stop offset="50%" stop-color="lime" /> <stop offset="100%" stop-color="white" /> </lineargradient> <lineargradient id="vertical" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="olive" /> <stop offset="50%" stop-color="lime" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <rect fill="url(#diagonal_bas)" x="0" y="0" width="300" height="300"/> <rect fill="url(#diagonal_haut)" x="50%" y="0" width="300" height="300"/> <rect fill="url(#horizontal)" x="0%" y="400" width="300" height="300"/> <rect fill="url(#vertical)" x="50%" y="400" width="300" height="300"/> </svg>

Nous avons vu qu'une forme peut être remplie avec une couleur (opaque ou transparente) ou avec un motif (balise pattern)
Nous voyons maintenant qu'une forme peut être remplie avec un dégradé (linéaire ou radial) !
Vous découvrirez ultérieurement dans ce tuto que l'on peut aussi appliquer à une forme des effets appelés filtres.

Dans le canevas ci-dessus j'ai défini quatre types de dégradés ayant des axes de dégradé différents puis j'utilise chacun de ces dégradés pour remplir un rectangle.

Syntaxe

On déclare un dégradé linéaire grâce au conteneur linearGradient dans lequel on inclut des balises stop. Chaque balise stop contient deux attributs : offset et stop-color.
La balise linearGradiant doit contenir quatre attributs x1 y1 x2 et y2 qui précisent l'axe du dégradé à moins que nous voulions un dégradé horizontal. Dans ce cas ces quatre attributs sont inutiles !
Comme tous les objets réutilisables, linearGradient doit évidemment se trouver dans le conteneur defs.

Les dégradés radiaux

SVG - balise radialGradiant

Le code SVG correspondant

<svg width="100%" height="100%" viewBox ="0 0 800 400" > <defs> <radialGradient id="radial"> <stop offset="0%" stop-color = 'olive' /> <stop offset="25%" stop-color = 'green' /> <stop offset="50%" stop-color = 'lime'/> <stop offset="75%" stop-color = 'white'/> </radialGradient> </defs> <circle cx = '50%' cy = '100' r = '100' fill = 'url(#radial)' /> <ellipse cx = '50%' cy = '300' rx = '150' ry ='100' fill = 'url(#radial)' /> </svg>

Un dégradé radial est défini grâce au conteneur radialGradiant contenu dans la balise defs.
Ici on définit un dégradé identifié radial et on utilise ce degradé pour remplir deux formes : un cercle et une ellipse.

Retour menu