« Découvrir le SVG/Manipulations avancées » : différence entre les versions
Contenu supprimé Contenu ajouté
→Dégradés de couleurs : orientation |
|||
Ligne 267 :
* le cas échéant <code>stop-opacity</code> qui définit l'opacité de l'arrêt (voir ci-dessus).
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 :
Ligne 286 :
/>
</source>
On peut également définir le vecteur du gradient sous la forme de quatre attributs <code>x1</code>, <code>y1</code>, <code>x2</code> et <code>y2</code> : les arrêts à 0 % et à 100 % sont placés respectivement aux points P<sub>1</sub>(''x''<sub>1</sub>, ''y''<sub>1</sub>) et P<sub>2</sub>(''x''<sub>2</sub>, ''y''<sub>2</sub>), et les ligne de même couleur sont perpendiculaires à la droite (P<sub>1</sub>P<sub>2</sub>). Par exemple, le code suivant fait un dégradé suivant la grande diagonale du rectangle :
<source lang="xml">
<defs>
<linearGradient
id="dégradé"
x1="0" y1="0"
x2="100%" y2="100%"
>
<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>
==== Dégradé radial ====
== Métadonnées ==
| |||