|
| |
| PRATIQUE XML |
 |
|
|
| Variations des pointillés d'un trait SVG |
| |
| Présentation des possibilités de personnalisation des pointillés du langage vectoriel XML.
(23/06/2005) |
 |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
L'attribut style des principales
balises graphiques de SVG permet de savamment modifier la représentation
finale de l'objet. Parmi les propriétés de cet attribut se trouvent
ainsi stroke-opacity pour modifier
l'opacité du trait, stroke-width pour
changer son épaisseur, ou encore, simplement, stroke
pour en altérer la couleur.
SVG, comme
CSS, autorise l'utilisation de pointillés pour remplacer l'habituel
trait continu, ce qui peut se révéler utile dans certaines situations.
Là où SVG est supérieur à CSS, c'est qu'il y est possible d'être
beaucoup plus précis quant au résultat final.
L'utilisation de base de cette propriété consiste à indiquer
la largeur du trait et de l'espace entre deux traits, comme
ceci :
<line x1="10" y1="10" x2="100" y2="100"
style="stroke-dasharray: 5, 5" />
Ici on indique que les traits et espace doivent avoir 5 pixels
de longueur. Il est donc possible d'avoir des pointillés moins
"linéaires" :
<line x1="10" y1="10" x2="100" y2="100"
style="stroke-dasharray: 10, 2" />
...met en place des traits de 10 pixels pour des espaces de
seulement deux.
Il est enfin possible d'utiliser une suite de chiffres pour arriver
à une certaine représentation :
<line x1="10" y1="10" x2="100" y2="100"
style="stroke-dasharray: 10, 2, 5, 7" />
...indique "trait de 10 pixels, espace de 2 pixels, trait de
5 pixels, espace de 7 pixels", puis retour au début.
Enfin, si la liste contient un nombre impair de chiffres, SVG
fait boucler le tout de manière originale :
<line x1="10" y1="10" x2="100" y2="100"
style="stroke-dasharray: 10, 2, 5" />
...donnera "trait de 10 pixels, espace de 2 pixels, trait de
5 pixels, espace de 10 pixels, trait de 2 pixels, espace de
5 pixels...".
|
|
|
|
