Une étoile à cinq branches, un triangle d'alerte, un hexagone décoratif : dès qu'une forme géométrique a des côtés droits et doit se refermer sur elle-même, <polygon> est le raccourci le plus rapide. Plutôt que d'enchaîner des commandes L puis un Z comme avec un <path>, une seule liste de coordonnées suffit.
C'est l'élément préféré pour dessiner des icônes géométriques simples sans avoir à mémoriser la syntaxe des commandes de tracé. Beaucoup de bibliothèques d'icônes proposent d'ailleurs de coller directement une liste de points toute prête plutôt que de recalculer un contour complexe en commandes de tracé.
Définition
L'élément <polygon> dessine une forme fermée à partir d'une liste de points donnée dans l'attribut points, sous la forme d'une suite de paires x,y séparées par des espaces ou des virgules. Le navigateur trace une ligne droite entre chaque point dans l'ordre, puis referme automatiquement la forme en reliant le dernier point au premier, sans qu'il soit nécessaire d'écrire ce dernier segment.
Attributs principaux
| Attribut | Rôle |
|---|---|
points | Liste des sommets, sous la forme « x1,y1 x2,y2 x3,y3... » |
fill, stroke | Couleur de remplissage et de contour |
fill-rule | Règle de remplissage utilisée quand les côtés se croisent |
Une valeur de points trop courte (moins de trois paires de coordonnées) ne provoque pas d'erreur visible mais empêche simplement toute forme de s'afficher, un polygone a besoin d'au moins trois sommets pour délimiter une surface.
Exemple de rendu concret
Un triangle d'alerte et une étoile à cinq branches, deux formes courantes en interface :
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 75,80 5,80" fill="#e9c46a" stroke="#8a6d1a" stroke-width="3" />
<polygon points="160,5 170,38 205,38 177,58 187,90 160,70 133,90 143,58 115,38 150,38" fill="#f4a261" />
</svg>Le triangle n'a besoin que de trois points, reliés puis refermés automatiquement. L'étoile utilise dix points qui alternent entre une pointe extérieure et un creux intérieur, sans jamais avoir à écrire de commande de fermeture.
Différence avec une ligne brisée
La différence avec <polyline> tient uniquement à la fermeture de la forme. Une ligne brisée reste toujours ouverte, le dernier point n'est jamais relié au premier, alors qu'un <polygon> ferme systématiquement le tracé et remplit l'intérieur avec la couleur définie par fill. Si l'objectif est de dessiner un contour fermé et rempli, comme une icône ou une pastille, <polygon> est le bon choix ; si l'objectif est une trajectoire ou un graphique en ligne qui ne se referme pas, l'autre forme reste préférable. Il est possible d'imiter un polygone fermé avec une ligne brisée, en répétant simplement son premier point à la fin de la liste de points, mais changer de balise reste plus explicite pour qui relira le code plus tard.
Piège classique
points d'un <polygon> ne connaît aucune commande de courbe. Toutes les lignes tracées entre les points sont forcément droites, il est impossible d'obtenir un coin arrondi ou un côté courbe sans basculer vers un tracé plus libre, ce qui piège souvent les débutants qui cherchent en vain un attribut « rx » comme sur un rectangle.Cas d'usage réel
Les icônes de notation par étoiles, les badges hexagonaux de statut, les flèches de direction dans un diagramme ou les logos géométriques simples se dessinent presque tous avec <polygon>. C'est aussi la forme de base des jauges en radar (« spider chart ») où chaque sommet représente une valeur mesurée sur un axe différent. Un simple triangle orienté, obtenu avec seulement trois points, sert aussi de flèche de tri dans un tableau de données ou de curseur de sélection dans un menu déroulant.
Foire aux questions
Non, c'est justement l'intérêt du <polygon> par rapport à un tracé manuel, la fermeture entre le dernier et le premier point est automatique, répéter le premier point ne provoque pas d'erreur mais n'apporte rien.
points ?Oui, une coordonnée négative place simplement le point en dehors de la zone visible définie par le viewBox, ce qui peut être volontaire pour faire dépasser une pointe d'étoile hors du cadre.
Oui, comme dans une étoile à cinq branches classique, et c'est justement l'attribut fill-rule qui détermine quelles zones internes sont remplies ou laissées vides quand les côtés se chevauchent. La valeur par défaut, nonzero, remplit la quasi-totalité des cas d'usage courants, tandis que la valeur evenodd s'utilise surtout pour créer des découpes ou des trous à l'intérieur d'une forme complexe.