Polyline SVG
Description de l'élément <polyline>
L'élément SVG <polyline> crée n'importe quelle forme constituée uniquement de lignes droites reliant plusieurs points. Contrairement à l'élément <polygon>, <polyline> crée des formes ouvertes.
Exemple de l'élément SVG <polyline> :
Exemple de l'élément SVG <polyline>
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Pour définir la forme, listez les paires de coordonnées dans l'attribut points. Séparez les valeurs x et y de chaque paire par une virgule, et séparez chaque paire par un espace. Par exemple : points="30,30 50,35 70,50".
Exemple de l'élément SVG <polyline> avec des lignes droites :
Exemple de l'élément SVG <polyline> avec des lignes droites
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Attributs
| Attribut | Description |
|---|---|
| points | Cet attribut spécifie la liste des points (paires de coordonnées absolues x,y) nécessaires au tracé de la polyline. |
| pathLength | Cet attribut spécifie la longueur totale du tracé, en unités utilisateur. |
| stroke-linejoin | Spécifie le type de coin créé lorsque deux lignes se rejoignent. |
| stroke-linecap | Spécifie la forme des extrémités des lignes. |
L'élément SVG <polyline> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quels attributs peuvent être utilisés avec l'élément SVG <polyline> en HTML ?