SVG InlineDégradé de couleur
SVG avec dégradé de couleur dans une ellipse
Pour réaliser un dégradé de couleur en SVG, on utilise la balise <linearGradient> qui accepte des attributs :
Source: W3Schools
Les attributs de la balise SVG ellipse sont :
- L'attribut id de la balise linearGradient défini un nom unique
- Les attibuts x1, x2, y1,y2 de la balise linearGradient définissent la position de début et de fin du gradiant.
- La couleur finale peut être composée de plusieurs couleurs. Chaque couleur est définie avec une balise <stop>. L'attribut offset est utilisé pour définir ou la couleur débute et se termine.
- L'attibut fill relie l'élément ellipse au gradiant.
<svg height="150" width="150">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<ellipse cx="80" cy="70" rx="70" ry="50" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="35" y="85">SVG</text>
Désolé, votre navigateur ne support pas le SVG. </svg>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<ellipse cx="80" cy="70" rx="70" ry="50" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="35" y="85">SVG</text>
Désolé, votre navigateur ne support pas le SVG. </svg>
Source: W3Schools
Les attributs de la balise SVG ellipse sont :
- cx : défini les coordonnées en x du centre de l'ellipse
- cy : défini les coordonnées en y du centre de l'ellipse
- rx : défini le rayon horizontal (x)
- ry : défini le rayon vertical (y)
