Easy-Micro


LANGAGE SVG Inline
Dé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 :
  • 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 Désolé, votre navigateur ne support pas le SVG.
<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>

  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)

Pour aller plus loin..



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Vendredi 18 janvier 2019 - Semaine 03 - Sainte Prisca (Demain: Saint Marius)
Aujourd'hui, c'est l'anniversaire de Philippe Starck (1949-70 ans), créateur et décorateur d'intérieur français. Autre 18 janvier: 2016 - Décès de Glenn Frey le chanteur fondateur du groupe californien Eagles.
Haut de page Easy-Micro