SVG Polygon
Sur cette page, vous trouverez des informations utiles sur l'élément SVG <polygon>, des exemples d'utilisation et la possibilité d'en créer un vous-même.
Description de l'élément <polygon>
L'élément SVG <polygon> crée une forme fermée composée de segments de droite. Un polygone est défini par une liste de points (au moins trois), et la forme est fermée automatiquement : le navigateur trace un dernier segment du dernier point vers le premier, vous n'avez donc pas besoin de répéter la coordonnée de départ.
Ce comportement de fermeture automatique est la différence essentielle entre <polygon> et <polyline> : une polyligne trace les mêmes segments connectés mais laisse le chemin ouvert (aucun segment de retour vers le début). Utilisez <polygon> pour les formes remplies et fermées comme des triangles, des étoiles ou des flèches, et <polyline> pour les chemins ouverts comme des lignes en zigzag ou des graphiques.
L'attribut points
La forme est entièrement décrite par l'attribut points. Il contient une liste de paires de coordonnées x,y, exprimées en unités de l'espace utilisateur :
points="x1,y1 x2,y2 x3,y3 ..."- Chaque paire représente un sommet du polygone.
- Les paires sont séparées par des espaces ; au sein d'une paire, les valeurs
xetysont séparées par une virgule (ou un espace —220 30 270 210est également valide, mais la forme avec virgule est plus lisible). - Les coordonnées sont absolues, mesurées depuis le coin supérieur gauche du canevas SVG, où
yaugmente vers le bas.
Ainsi, points="220,30 270,210 180,230" définit trois sommets et, comme la forme se ferme automatiquement, produit un triangle.
Exemple de l'élément SVG <polygon> avec trois côtés :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Ici, l'attribut points liste trois sommets — 220,30, 270,210 et 180,230 — et le navigateur les relie et ferme la forme pour former un triangle.
Style : fill, stroke et stroke-width
L'apparence visuelle est contrôlée par les attributs de présentation. Ceux-ci ne sont pas spécifiques à <polygon> — ils s'appliquent à toutes les formes SVG, et chacun possède une propriété CSS équivalente. Vous pouvez donc les définir en ligne (comme dans style="..." ci-dessus), en tant qu'attributs simples (fill="yellow"), ou depuis une feuille de style CSS :
fill— la couleur utilisée pour peindre l'intérieur de la forme.stroke— la couleur du contour.stroke-width— l'épaisseur du contour, en unités utilisateur.
Étant de véritables propriétés CSS, une règle de feuille de style comme polygon { fill: yellow; stroke: green; } remplace les attributs fill/stroke simples, mais est elle-même remplacée par un style en ligne.
Exemple de l'élément SVG <polygon> avec quatre côtés :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>L'ajout de paires de coordonnées supplémentaires ajoute simplement plus de sommets. Les quatre points ci-dessus produisent un quadrilatère ; vous pouvez lister autant de points que la forme en a besoin.
Construire un polygone régulier
Un polygone régulier (triangle équilatéral, carré, pentagone, hexagone, etc.) a tous ses côtés et angles égaux. Il n'existe pas d'attribut dédié à cela — vous placez vous-même les sommets sur un cercle. Pour n côtés sur un cercle de rayon r centré en (cx, cy), chaque sommet i se trouve à :
x = cx + r * cos(2π * i / n)
y = cy + r * sin(2π * i / n)En pratique, les points sont généralement précalculés (à la main ou avec un petit script) et inscrits dans l'attribut points. Les exemples de triangle et de quadrilatère ci-dessus utilisent des coordonnées choisies à la main, leurs côtés ne sont donc pas exactement égaux.
Exemple de l'élément SVG <polygon> pour créer une étoile :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Comprendre fill-rule (pourquoi le centre de l'étoile est creux)
Lorsque le contour d'une forme se croise — comme c'est le cas pour une étoile à cinq branches — le navigateur doit décider quelles régions fermées comptent comme « intérieur » et doivent être remplies. L'attribut de présentation fill-rule contrôle cette décision. Il accepte l'une de ces deux valeurs :
nonzero(valeur par défaut) — utilisée dans l'exemple de l'étoile ci-dessus. Pour toute région, le navigateur trace un rayon imaginaire vers l'extérieur et compte comment le chemin le croise :+1pour chaque croisement dans un sens,-1dans l'autre. Si le total est non nul, la région est remplie. Pour une étoile tracée en un seul trait continu, le pentagone intérieur obtient un compte non nul, il est donc rempli — l'étoile apparaît pleine.evenodd— compte les croisements indépendamment de leur direction. Si le compte est impair, la région est remplie ; s'il est pair, elle reste transparente. Avec cette règle, le pentagone intérieur de l'étoile obtient un compte pair et reste creux.
Ainsi, remplacer simplement fill-rule:nonzero par fill-rule:evenodd dans l'exemple de l'étoile rend le centre transparent — une façon courante de créer un contour d'étoile.
Attributs
| Attribut | Description |
|---|---|
points | La liste des points (paires de coordonnées absolues x,y) qui définissent les sommets du polygone. |
fill-rule | Comment les régions qui se chevauchent sont remplies : nonzero (par défaut) ou evenodd. |
pathLength | La longueur totale que le chemin doit être considéré avoir, en unités utilisateur. Le définir permet à des attributs comme stroke-dasharray d'utiliser des valeurs relatives à cette longueur plutôt qu'à la longueur géométrique réelle — utile lorsque vous ne souhaitez pas mesurer la forme exactement. |
Comme toutes les formes SVG, <polygon> accepte également les attributs de présentation fill, stroke et stroke-width, ainsi que les Attributs globaux et les Attributs d'événements.
Pages associées
- SVG Polyline — le pendant à chemin ouvert de
<polygon>. - SVG Path —
<path>, l'élément le plus flexible pour tracer des courbes et des formes complexes. - SVG Reference — la liste complète des éléments et attributs SVG.