SVG <polygon>

SVG Polígono - <polygon>

<polygon> O elemento é usado para criar figuras que contenham pelo menos três lados.

Os polígonos são formados por retas e têm a forma "fechada" (todas as linhas se conectam).

A palavra Polygon deriva do grego. "Poly" significa "muitos", "gon" significa "ângulo".

Exemplo 1

O exemplo a seguir cria um polígono com três lados:

Este é o código SVG:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Experimente Sozinho

Explicação do código:

  • A propriedade points define as coordenadas x e y de cada canto do polígono

Exemplo 2

O exemplo a seguir cria um polígono com quatro lados:

Este é o código SVG:

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Experimente Sozinho

Exemplo 3

Usando <polygon> Elemento cria uma estrela:

Este é o código SVG:

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

Experimente Sozinho

Exemplo 4

Altere o atributo fill-rule "evenodd":

Este é o código SVG:

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

Experimente Sozinho