SVG <polygone>
Polygone SVG - <polygone>
L'élément <polygon> est utilisé pour créer un graphique contenant au moins trois côtés.
Les polygones sont constitués de lignes droites et la forme est "fermée" (toutes les lignes se connectent).
Polygon vient du grec. "Poly" signifie "plusieurs" et "gon" signifie "angle".
Exemple 1
L'exemple suivant crée un polygone à trois côtés :
Voici le code SVG :
Exemple
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Explication du code :
- L'attribut points définit les coordonnées x et y pour chaque coin du polygone
Exemple 2
L'exemple suivant crée un polygone à quatre côtés :
Voici le code SVG :
Exemple
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Exemple 3
Utilisez l'élément <polygon> pour créer une étoile :
Voici le code SVG :
Exemple
<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>
Exemple 4
Changez la propriété fill-rule en "evenodd":
Voici le code SVG :
Exemple
<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>