Desenhar Polígono com SVG <polygon>

O elemento <polygon> define uma forma de polígono fechado composta por uma série de segmentos de reta conectados, onde o último ponto é conectado ao primeiro. O elemento <polygon> geralmente é usado para desenhar poligonos com vários (3ou mais) lados/a forma dos bordas.

Exemplo de polígono SVG Polygon

Este é um exemplo simples de polígono 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>

O efeito após a execução é o seguinte:

Você pode ter notado que, mesmo que seja apenas listado3pontos, todos eles desenharam todos3face. Isso é porque o elemento <polygon> desenha uma linha entre todos os pontos, incluindo uma linha de volta do último ponto ao primeiro. O <polyline> não desenha uma linha de volta do último ponto ao primeiro. Parece que essa é a única diferença entre os elementos <polygon> e <polyline>.

Desenhar um hexagono

Código de exemplo:

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

O efeito de execução é o seguinte

Desenhar um otogon

Este é um exemplo maior-8polígono de

<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>

Desenhar Estrela de Cinco Pontas com SVG

Código de exemplo:

<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>

O efeito após a execução é o seguinte: