Nous avons vu les chemins (path) dans l'activité 3. Les chemins ne se limitent pas à des réunions de segments, on peut aussi réaliser des courbes très évoluées.
Les paths, ou plus particulièrement les données contenues dans l’attribut d sont organisées par commandes. Il y a dix commandes, chacune représentée par une lettre (M, Z, L, H, V, C, S, Q, T ou A). Chacune de ces commandes donne le tracé d’une ligne grâce à un ou plusieurs couples de coordonnées (ça dépend de la commande).
Première commande : la commande Moveto, notée M, qui prend en paramêtre les coordonnées du premier point du chemin. Elle peut être décrite par cette phrase : « Je déplace le crayon jusqu’au point des coordonnées indiquées et je le pose. ». La seconde commande est la commande Lineto, notée L, qui trace une ligne des dernières coordonnées aux coordonnées indiqués.
Saisissez et testez ce code
<svg width="400" height="300" style="stroke:darkviolet;fill:lavenderblush;">
<path d="M 120,200 L 140,120 L 180,280 L 220,120 L 260,280 L 300,120"/>
</svg>
Si les commandes Moveto et Lineto suffisent à émuler un polyline, il faut une troisième commande pour avoir le même résultat qu’un polygon qui, rappelons le, a pour seule différence de « fermer » le chemin en traçant une ligne du dernier couple de points au premier. Cette commande s’appelle Closepath et la lettre qui la désigne est Z.
Saisissez et testez ce code
<svg width="400" height="300" style="stroke:darkviolet;fill:lavenderblush;">
<path d="M 40,40 L 150,100 L 100,280"/>
<path d="M 240,40 L 350,100 L 300,280 Z"/>
</svg>
Il y a deux raccourcis pour tracer des lignes horizontales ou verticales : les Lineto horizontaux (commande H) et les Lineto verticaux (commande V). Préférez toujours ces commandes à la commande Lineto (lettre L) qui est moins lisible et moins rapide. Les commandes H et V doivent être suivis d’un seul nombre : la coordonnée en abscisse (pour la commande H) ou en ordonnée (pour la commande V) du point d’arrivée. On peut ainsi facilement tracer un carré comme ceci :
Saisissez et testez ce code
<svg width="400" height="300" style="stroke:darkviolet;fill:lavenderblush;">
<path d="M 100,100 H 200 V 200 H 100 Z"/>
</svg>
Les possibilités de SVG ne s’arrêtent pas là. Il est possible, grâce à la commande M, de dessiner plusieurs sous-tracés dans un
seul path. Même si ça ne paraît pas forcément utile, vous verez qu’on pourra s’en servir
pour mettre du texte sur un path ou faire de l’animation. En ce qui concerne les possibilités
de la commande Moveto, je vous avais dit que M x,y correspondait à la phrase Je déplace le crayon jusqu’au
point de coordonnées x,y et je le pose
. La formulation peut paraître puérile mais la commande Moveto fonctionne exactement comme
ça (en supposant qu’à l’apparition d’un M, le crayon est levé). Voici un exemple d’utilisation :
Saisissez et testez ce code
<svg width="400" height="300" style="stroke:darkviolet;fill:lavenderblush;">
<path d="M 100,100 H 150 L 100,200 Z M 300,100 H 250 L 300,200 Z"/>
</svg>
Il est possible, et ça va nous simplifier la vie, de préciser que les coordonnées qu’on indique dans un path sont relatives. Il suffit pour cela de mettre les lettres qui indiquent les comamndes en… minuscule ! On peut bien sur varier, et spécifier que certaines coordonnées sont relatives tandis que d’autres sont absolues.
Saisissez et testez ce code
<svg width="400" height="300" style="stroke:darkviolet;fill:none;">
<path d="M 10,10 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20"/>
</svg>
Comme vous venez de vous en rendre compte, c’est maintenant que ça se corse! Pour commencer par le début, qu’est ce qu’un arc elliptique ? Vous vous souvenez d’avoir tracé des ellipses ? Et bien un arc elliptique est un morceau, une portion d’ellipse.
Tracer un arc elliptique requiert beaucoup d’informations. Alors qu’il n’en fallait que deux (au maximum) pour tracer un ligne droite, il en faut maintenant sept ! Il faut déjà deux points, soit quatres nombres, pour tracer les deux ellipses dont l’axe des x est parallèle à l’axe des ordonnées. Mais comme ce n’est pas toujours le cas, il faut aussi connaître l’inclinaison de cet axe !
Commençons par le début : la lettre qui commande le tracé d’un arc elliptique est A (ou a minuscule pour des coordonnées
relatives). Les deux premiers paramêtres sont respectivement la longueur du rayon x et la longueur du rayon y (ces deux rayons
restent perpendiculaires).
Le troisième est la rotation (sens direct, inverse des aiguilles d’une montre) en degrés de l’axe x de l’ellipse par
rapport à l’axe des ordonnées.
Le quatrième paramêtre, appelé large-arc-flag, indique si on doit afficher l’arc dont la mesure fait plus de la moitié du périmètre
de l’ellipse (dans ce cas, la valeur est 1), ou l’arc dont la mesure fait moins de la moitié du périmètre (valeur : 0).
Le cinquième paramêtre, appelé sweep-flag, indique quant à lui si l’arc doit être dessiné dans la direction négative des angles (dans
lequel cas sa valeur est 0) ou dans la direction positive des angles (valeur : 1).
Les deux derniers sont les coordonnées du point d’arrivée, les coordonnées du point de départ étant données par la commande
précédent la commande A.
La commande d’arc elliptique est à mon sens assez difficile à comprendre, mais une fois assimilée, elle est très simple d’utilisation. Il faut souvent beaucoup de tests avant de comprendre comment elle fonctionne. Voici un exemple très simple :
Saisissez et testez ce code
<svg width="800" height="300" style="stroke:darkviolet;fill:lavenderblush;">
<path d="M 10,50 A 50 20 0 0 0 110,50"/>
<path d="M 200,150 a 60 25 0 0 0 100,50"/>
<path d="M 450,290 a 45 280 0 0 1 -40,-280"/>
<path d="M 600,150 a 100 100 0 0 0 200,0 a 100 100 0 0 0 -200,0"/>
</svg>
Les courbes de Bézier (du nom d’un ingénieur de Renault) sont des courbes faisant intervenir des notions mathématiques plus poussées telles que les tangentes et point d'inflexion. Les lettres utilisées sont le Q, T, C et S...
Voici juste quelques exemples.
Saisissez et testez ces codes
<svg width="800" height="300" style="stroke:darkviolet;fill:none;">
<path d="M 50,100 Q 100,10 350,100"/>
</svg>
<svg width="800" height="300" style="stroke:darkviolet;fill:none;">
<path d="M 10,150 Q 100,20 180,180 T 390,100"/>
</svg>
<svg width="800" height="300" style="stroke:darkviolet;fill:none;">
<path d="M 10,10 C 50,250 50,5 390,290"/>
</svg>
<svg width="800" height="300" style="stroke:darkviolet;fill:none;">
<path d="M 10,100 C 50,50 150,200 200,120 S 380,20 370,260"/>
</svg>
Pour plus d'informations, allez sur le site SVGROUND.