SVG <polígono>
Polígono SVG - <polígono>
O elemento <polygon> é usado para criar um gráfico que contém pelo menos três lados.
Os polígonos são feitos de linhas retas e a forma é "fechada" (todas as linhas se conectam).
Polígono vem do grego. "Poly" significa "muitos" e "gon" significa "ângulo".
Exemplo 1
O exemplo a seguir cria um polígono com três lados:
Segue 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>
Explicação do código:
- O atributo points define as coordenadas xey para cada canto do polígono
Exemplo 2
O exemplo a seguir cria um polígono com quatro lados:
Segue 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>
Exemplo 3
Use o elemento <polygon> para criar uma estrela:
Segue 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>
Exemplo 4
Altere a propriedade da regra de preenchimento para "evenodd":
Segue 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>