SVG Polygon - <polígono>
A <polygon> elemento é utilizado para criar um gráfico que contém, pelo menos, três lados.
Polígonos são feitos de linhas retas, e a forma é "closed" (todas as linhas de conectar-se).
Polygon vem do grego. "Poly" significa "many" e "gon" meios "angle" .
exemplo 1
O exemplo a seguir cria um polígono com três lados:
Aqui está o código SVG:
Exemplo
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Tente você mesmo " Code explanation:
- O points atributo define o X e Y coordenadas para cada canto do polígono
exemplo 2
O exemplo a seguir cria um polígono com quatro lados:
Aqui está o código SVG:
Exemplo
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Tente você mesmo " exemplo 3
Use o <polygon> elemento para criar uma estrela:
Aqui está o código SVG:
Exemplo
<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>
Tente você mesmo " exemplo 4
Altere a propriedade fill-regra para "evenodd" :
Aqui está o código SVG:
Exemplo
<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>
Tente você mesmo "