SVG Polyline
Sur cette page, vous trouverez des informations sur l'élément SVG <polyline>, des exemples d'utilisation et la possibilité d'en créer un vous-même.
L'élément SVG <polyline> dessine une série de segments de droite connectés à travers une liste de points. Pensez-y comme un exercice de « relier les points » avec un trait continu unique : vous lui donnez des coordonnées, et il trace une ligne de chaque point au suivant. Il est idéal pour les graphiques linéaires, les lignes en zigzag, les sparklines et tout contour ouvert à plusieurs segments.
Cette page explique la syntaxe de points, la règle de style que tout débutant se trompe (fill:none), en quoi <polyline> diffère d'un <polygon> fermé, et comment contrôler l'apparence des coins et des extrémités de ligne. Pour la famille complète des formes de base SVG, consultez la Référence SVG.
Description de l'élément <polyline>
L'élément SVG <polyline> crée une forme constituée uniquement de lignes droites reliant plusieurs points. Contrairement à l'élément <polygon> — qui trace automatiquement un segment de fermeture vers le premier point pour former une forme scellée — un <polyline> est une forme ouverte : le dernier point n'est pas relié au premier. Si vous avez besoin d'un contour fermé (un triangle, un hexagone, une étoile), utilisez <polygon>. Pour les formes libres avec des courbes, utilisez <path>.
La règle la plus importante : définir fill:none
Par défaut, chaque forme SVG est remplie avec du noir uni (fill:black). Pour une forme fermée, cela a du sens, mais un <polyline> est ouvert — et SVG le remplit quand même en dessinant un bord de fermeture imaginaire et en inondant la zone délimitée de noir. C'est l'erreur la plus courante des débutants : vous vous attendez à un trait fin et vous obtenez à la place une tache noire.
La solution consiste à désactiver explicitement le remplissage avec fill:none et à s'appuyer sur stroke pour rendre la ligne visible :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- WRONG: no fill set, so SVG floods the open shape with black -->
<polyline points="20,20 60,80 100,20 140,80 180,20"
style="stroke:purple;stroke-width:4" />
<!-- RIGHT: fill:none leaves a clean line -->
<polyline points="220,20 260,80 300,20 340,80 380,20"
style="fill:none;stroke:purple;stroke-width:4" />
</svg>
</body>
</html>Presque tous les <polyline> que vous écrirez devraient inclure fill:none.
Exemple de l'élément SVG <polyline> :
<!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>La syntaxe de points
L'attribut points est une liste plate de paires de coordonnées absolues, écrites sous la forme x,y. Les points sont dessinés dans l'ordre dans lequel vous les listez, et chaque x,y est mesuré depuis le coin supérieur gauche du système de coordonnées SVG (x croît vers la droite, y croît vers le bas).
SVG est tolérant concernant les séparateurs entre les nombres — les virgules et les espaces sont interchangeables. Toutes ces notations définissent les mêmes trois points :
points="30,30 50,35 70,50"
points="30 30 50 35 70 50"
points="30,30, 50,35, 70,50"Une convention courante et lisible consiste à mettre une virgule à l'intérieur de chaque paire et un espace entre les paires, comme dans points="30,30 50,35 70,50". Vous avez besoin d'un nombre pair de coordonnées ; un nombre impair constitue une erreur.
Exemple de l'élément SVG <polyline> avec des lignes droites :
<!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>Ici l'escalier semble correct car fill:white correspond par hasard à l'arrière-plan de la page — mais c'est un piège. Sur un arrière-plan coloré ou à motifs, le remplissage blanc de la forme ouverte serait visible. Utiliser fill:none est le choix robuste.
Exemple avec stroke-linecap et stroke-linejoin :
Deux propriétés de présentation contrôlent l'apparence d'une polyligne tracée : stroke-linecap donne la forme aux deux extrémités ouvertes de la ligne (butt, round ou square), et stroke-linejoin donne la forme aux coins là où les segments se rencontrent (miter, round ou bevel). Elles sont plus visibles sur des traits épais :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- Sharp default: square ends, mitered corners -->
<polyline points="20,40 80,140 140,40"
style="fill:none;stroke:teal;stroke-width:16;
stroke-linecap:butt;stroke-linejoin:miter" />
<!-- Soft: rounded ends and rounded corners -->
<polyline points="200,40 260,140 320,40"
style="fill:none;stroke:tomato;stroke-width:16;
stroke-linecap:round;stroke-linejoin:round" />
</svg>
</body>
</html>Comparez le coin pointu de la ligne gauche (teal) avec le coin arrondi de celle de droite (tomato). Pour explorer ces options de trait et d'autres en profondeur, consultez SVG Stroking.
Attributs spécifiques à <polyline>
Seuls deux attributs appartiennent véritablement à l'élément <polyline> lui-même — tout le reste que vous y définissez (fill, stroke, stroke-width, etc.) sont des propriétés de présentation héritées du modèle de présentation général de SVG, traitées séparément ci-dessous.
| Attribut | Description |
|---|---|
| points | La liste des points (paires de coordonnées absolues x,y) qui définissent la polyligne. C'est le seul attribut obligatoire. |
| pathLength | La longueur totale de la ligne en unités utilisateur, utilisée pour calibrer les effets de trait (comme les tirets). |
Propriétés de présentation (héritées, non spécifiques à polyline)
fill, stroke, stroke-linecap et stroke-linejoin ne sont pas propres à <polyline> — ce sont des propriétés de présentation CSS qui s'appliquent à la plupart des éléments graphiques SVG et peuvent être définies soit comme attributs XML (stroke="purple") soit via CSS (style="stroke:purple"). Elles sont héritées et peuvent être remplacées comme n'importe quelle autre propriété CSS, c'est pourquoi elles sont listées ici plutôt que comme attributs d'élément.
| Propriété | Description |
|---|---|
| fill | La couleur utilisée pour remplir l'intérieur (automatiquement fermé). Définissez fill:none pour une ligne ouverte. |
| stroke | La couleur de la ligne elle-même. |
| stroke-width | L'épaisseur de la ligne. |
| stroke-linejoin | Le type de coin créé à l'intersection de deux segments : miter, round ou bevel. |
| stroke-linecap | La forme des extrémités ouvertes de la ligne : butt, round ou square. |
L'élément SVG <polyline> prend également en charge les Attributs globaux et les Attributs d'événement.