SVG Polygon - <polygon>
Le <polygon> élément est utilisé pour créer un graphique qui contient au moins trois côtés.
Polygones sont faites de lignes droites, et la forme est "closed" (toutes les lignes relient le haut).
Polygon vient du grec. "Poly" signifie "many" et "gon" moyen "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>
Essayez - le vous - même » Code explanation:
- Le points attribut 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>
Essayez - le vous - même » exemple 3
Utilisez le <polygon> élément 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>
Essayez - le vous - même » exemple 4
Modifiez la propriété fill-règle "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>
Essayez - le vous - même »