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 ]
Mardi 23 juillet 2019 - Semaine 30 - Sainte Brigitte (Demain: Sainte Christine)
Aujourd'hui, c'est l'anniversaire de Daniel Radcliffe (1989-30 ans), acteur britannique (Harry Potter). Autre 23 juillet: 1983 - Atterrissage forcé sans moteur du vol 143 Air Canada, surnommé le Planeur de Gimli.
Haut de page Easy-Micro