Dessiner une ligne brisée avec SVG <polyline>

L'élément polyline est une forme de base de SVG, utilisé pour créer une série de lignes droites reliant plusieurs points. Un polyline typique est utilisé pour créer une forme ouverte, où le dernier point n'est pas connecté au premier point

Exemple de ligne brisée

Exemple de code pour une ligne brisée:

<svg width="120" height="120"　
　　　　　viewPort="0 0　120　120" version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg>
　　　　<polyline fill="none" stroke="black"　
　　　　　　　　　　　　　　points="20,100　40,60　70,80　100,20"/>
</svg>

L'effet après l'exécution est le suivant:

dessiner un triangle

Le code d'exemple suivant:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;"/>
</svg>

Prévisualisation de l'effet après exécution:

multiples lignes sont identifiées par des points. Chaque point est répertorié dans l'attribut points sous forme de x, y. Cet exemple a3points, qui définissent un triangle.
Définir3points sont connectés par des lignes, puis remplis. La couleur de remplissage par défaut est noire.

dessiner un triangle rempli de vert

Le code d'exemple suivant:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600; trait-largeur:　2;
　　　　　　　　　　　　　　　fill:　#33cc33;"/>
</svg>

Prévisualisation de l'effet après exécution:

Vous pourriez peut-être remarquer que seules deux lignes du triangle sont dessinées avec la couleur de trait (vert foncé). La raison en est que seules les lignes entre les points listés sont dessinées. Il n'y a pas de ligne retournant au premier point. Pour cela, points ajoute à nouveau le premier point à l'attribut, comme suit:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="10,2　　60,2　　35,52　　10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

L'attribut style de ce style définit la couleur et l'épaisseur du trait (ligne) ainsi que la couleur de remplissage.