Dessiner un polygone avec SVG <polygon>

L'élément <polygon> définit une forme polygonale fermée composée d'un ensemble de segments de lignes droits adjacents, où le dernier point est connecté au premier. L'élément <polygon> est généralement utilisé pour dessiner des polygones à multiples (3côtés (un ou plus)/la forme des bords

Exemple de polygone SVG Polygon

Ceci est un exemple simple de polygone SVG

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="10,0　　60,0　　35,50"
　　　　　　　　　style="stroke:#660000; fill:#cc3333;"/>
</svg>

L'effet après l'exécution est le suivant:

Vous pourriez déjà avoir remarqué que, même si seules les3points, tous dessinés3Il y a un nombre de faces. Cela est dû au fait que l'élément <polygon> dessine une ligne entre tous les points, y compris une ligne de retour de la dernière point à la première. Le <polyline> ne dessine pas une ligne de retour de la dernière point à la première. Cela semble être la seule différence entre les éléments <polygon> et <polyline>.

Dessiner un hexagone

Code d'exemple suivant:

<svg width="120" height="120" viewport="0 0　120　120" version="1.1"　　　　
xmlns="http://www.w3.org/2000/svg">　　　　
<polygon points="60,20　100,40　100,80　60,100　20,80　20,40"/>　　　　
</svg>

L'effet de exécution est le suivant

Dessiner un octogone

Ceci est un exemple plus grand-8un polygone à

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="50,5　　　100,5　　125,30　　125,80　100,105
　　　　　　　　　　　　　　　　　　　50,105　　25,80　　25,　30"
　　　　　　　　　　style="stroke:#660000; fill:#cc3333; stroke-width:　3;"/>
</svg>

Dessiner une étoile à cinq cotés avec SVG

Code d'exemple suivant:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<polygon points="100,10　40,180　190,60　10,60　160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;/>
</svg>

L'effet après l'exécution est le suivant: