Les balises line, polyline et polygon

La balise line

image SVG

Ci-dessus l'image vectorielle lignes.svg.

Le code du fichier SVG

<?xml version="1.0" encoding="utf-8"?> <svg width ="400" height ="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <title>Lignes avec SVG - balise line</title> <line x1="50" y1="50" x2="150" y2="150" stroke="black" /> <line x1="100" y1="50" x2="200" y2="150" style = 'stroke : red ; stroke-width : 5px ; stroke-opacity : 0.5 ;' /> <line x1="150" y1="50" x2="250" y2="150" stroke = 'blue' stroke-width = '10px' stroke-linecap = 'round' /> <line x1="200" y1="50" x2="300" y2="150" style ="stroke:blue ; stroke-width:10px ; stroke-dasharray:5 5;" /> </svg>

Commentaire du code

Pour tracer une ligne il faut employer la balise line avec 4 attributs : abscisse et ordonnées (x1 et y1) du point de départ puis abscisse et ordonnée du point d'arrivée (x2 et y2).
Par défaut une ligne a une épaisseur de 1 pixel(voir première ligne).
L'attribut stroke-linecap avec la valeur round permet d'avoir des extrémités arrondies (ajout d'un demi-cercle à chaque extrémité) et l'attribut stroke-dasharray avec la valeur 5 5 permet d'avoir des lignes pointillées : 5 pixels coloriés puis un intervalle de 5 pixels

Pour l'attribut stroke-linecap les autres valeurs possibles sont butt (valeur par défaut) et square (ajout d'un carré à chaque extrémité de la ligne).

Pour l'attribut stroke-dasharray le nombre d'arguments n'est pas forcément limité à 2 mais doit être pair. Par exemple : stroke-dasharray = '5 5 10 10' qui veut dire : un trait de 5 pixels puis un blanc de 5 suivi d'un trait de 10 et un espace de 10. Ce motif répété sur toute la ligne !

Notez que dans l'exemple le formatage d'un segment est tantôt réalisé avec des attributs et tantôt avec une règle de style reprenant les mêmes termes (stroke, stroke-with, stroke-opacity, stroke-linecap, etc.) mais cette fois comme propriétés de style (valeur de l'attribut style).

Balises polygon et polyline

image SVG

Ci-dessus l'image vectorielle polygones.svg.

Dans le premier triangle les angles sont arrondis, "aiguisés" dans le deuxième triangle et tronqués dans la troisième forme.

Le code du fichier SVG

<?xml version="1.0" encoding="utf-8"?> <svg width ="400" height ="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>La balise polygon rajoute automatiquement un segment entre le dernier et le premier point </desc> <polygon points ="50,50 50,100 150,50" stroke = 'navy' stroke-linejoin = 'round' stroke-width ="10" /> <polygon points ="100,100 100,200 250,100" stroke = 'olive' stroke-linejoin = 'miter' fill ="none" stroke-width ="10"/> <polyline points ="200,200 200,280 300,200" stroke = 'purple' stroke-linejoin = 'bevel' stroke-width ="10" /> </svg>

Commentaire

On emploie ici la balise polygon pour dessiner des formes fermées (ici deux triangles) et la balise polyline pour dessiner une forme ouverte.

En effet ces deux balises sont très proches ; la seule différence est que la balise polygon ajoute automatiquement un segment entre le dernier et le premier point.
Dans pour ces deux balises il suffit de préciser les coordonnées x et y des angles de la forme.
Notez bien la syntaxe : x,y x,y x,y ...

Remarquez que le premier et troisième triangles sont remplis de noir car j'ai oublié l'attribut fill = "none" donc par défaut la forme est remplie de noir.

Notez l'emploi de l'attribut stroke-linejoin pour préciser le style des angles.

Balises utiles ?

Pour dessiner un segment, un polygone ouvert ou fermé on peut remplacer avantageusement les balises citées dans cette page par la balise path
Tous les attributs présentés (stroke-linecap, stroke-linejoin, etc.) peuvent être utilisés aussi avec la balise path !
Cette balise est présentée dans la page suivante.
Retour menu