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 mots (stroke, stroke-with, stroke-opacity, stroke-linecap, etc.) mais cette fois comme propriétés de style (valeurs 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. 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.

Les nouveaux paramètres de mise en forme et les rectangles

Nous venons de voir des paramètres de mise en forme tels stroke-linejoin, stroke-dasharray.
Peuvent-ils s'appliquer à des rectangles ??? image SVG

Le premier rectangle est borduré de tirets, le second a des bordures arrondies. Les deux rectangles sont à demi opaques : le jaune de l'arrière plan se mélange avec la couleur de remplissage rouge des rectangles.
On voit très bien ici que la bordure d'une forme SVG est "à cheval" : moitié à l'intérieur et moitié à l'extérieur.

Le code de l'image vectorielle correspondante

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg style ="background : yellow;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox ="0 0 600 400"> <style> rect {fill : red; fill-opacity : 0.5 ; stroke-width : 10; stroke : green; stroke-opacity : 0.5 ;} </style> <rect x="300" y="200" width="300" height="100" stroke-linejoin ="round" /> <rect x="200" y="50" width="50" height="200" stroke-dasharray = "5 5" /> </svg>

Remarques

Notez qu'un fichier SVG peut contenir une feuille de style interne (exactement comme une page HTML).
On y définit une règle de style pour les éléments de type RECT.

Balises utiles ?

Pour dessiner un segment, un polygone ouvert ou fermé on peut utiliser à la place des balises évoquées dans cette page la balise PATH.
La balise PATH est présentée dans la page suivante.
Retour menu