« Découvrir le SVG/Manipulations avancées » : différence entre les versions

Contenu supprimé Contenu ajouté
Ligne 253 :
=== Dégradés de couleurs ===
 
En SVG, on peut définir deux types de dégradés de couleur : les dégradés linéaires — la couleur change lorsque l'on se déplace dans une direction — et les dégradés radiaux — la couleur change lorsque l'on s'éloigne d'un point.
{{...}}
 
Le dégradé peut se représenter comme une échelle de couleurs. Les couleurs de référence sont appelées « arrêts » ''({{lang|en|stops}})'' et sont caractérisés par :
* leur position sur l'échelle ''({{lang|en|offset}})'' ;
* la nature de la couleur.
Ainsi, les gradients contiennent au moins deux éléments <code>stop</code> ayant pour attribut :
* <code>offset</code> : nombre entre 0 et 1, ou bien pourcentage, désignant la position dans l'échelle ; le bas de l'échelle est désigné par <code>offset="0"</code> ou bien <code>offset="0%"</code>, le haut de l'échelle est désigné par <code>offset="1"</code> ou bien <code>offset="100%"</code> ;
* <code>stop-color</code> : couleur habituelle, par exemple <code>stop-color="black"</code> ou bien <code>stop-color="#000000"</code> (voir ''[[../Éléments graphiques#Syntaxe générale et aspect des objets|Éléments graphiques &gt; Syntaxe générale et aspect des objets]]'').
 
'''Dégradé linéaire'''
 
Un dégradé linéaire est défini par un élément <code>linearGradient</code>. Cet élément est entre les balises <code>defs</code> en début de document est possède un identifiant (attribut <code>id</code>). L'exemple suivant définit un dégradé du bleu au rouge et l'applique à un rectangle :
 
<source lang="xml">
<defs>
<linearGradient
id="dégradé"
>
<stop offset="0" stop-color="blue" />
<stop offset="1" stop-color="red" />
</linearGradient>
</defs>
 
<rect id="rectangle1"
x="18" y="18" width="36" height="18"
fill="url(#dégradé)"
/>
</source>
 
== Métadonnées ==