SVG <polygon>

SVG polygone - <polygon>

<polygon> L'élément est utilisé pour créer des graphiques composés d'au moins trois côtés.

Un polygone est composé de lignes et a une forme "fermée" (toutes les lignes sont connectées).

Le mot "Polygon" vient du grec. "Poly" signifie "beaucoup", "gon" signifie "angle".

Exemple 1

Dans l'exemple suivant, un polygone à trois côtés est créé :

Ceci est le code SVG :

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Essayer vous-même

Explication du code :

• L'attribut points définit les coordonnées x et y de chaque angle du polygone

Exemple 2

Dans l'exemple suivant, un polygone à quatre côtés est créé :

Ceci est le code SVG :

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Essayer vous-même

Exemple 3

Utiliser <polygon> L'élément crée une étoile :

Ceci est le code SVG :

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Essayer vous-même

Exemple 4

Changer l'attribut fill-rule en "evenodd"：

Ceci est le code SVG :

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Essayer vous-même