SVG Polygon
Nesta página, você encontra informações sobre o elemento SVG <polygon>, veja exemplos de uso e tente criar um por conta própria.
Descrição do elemento <polygon>
O elemento SVG <polygon> cria uma forma fechada composta de segmentos de linha reta. Um polígono é definido por uma lista de pontos de canto (pelo menos três), e a forma é fechada automaticamente: o navegador desenha uma linha final do último ponto de volta ao primeiro, portanto você não precisa repetir a coordenada inicial.
Esse comportamento de fechamento automático é a principal diferença entre <polygon> e <polyline>: uma polilinha desenha os mesmos segmentos de linha conectados, mas deixa o caminho aberto (sem segmento de retorno ao início). Use <polygon> para formas preenchidas e fechadas como triângulos, estrelas ou setas, e <polyline> para caminhos abertos como linhas em zigue-zague ou gráficos.
O atributo points
A forma é descrita inteiramente pelo atributo points. Ele contém uma lista de pares de coordenadas x,y, escritas em unidades do espaço do usuário:
points="x1,y1 x2,y2 x3,y3 ..."- Cada par representa um único canto do polígono.
- Os pares são separados por espaço em branco; dentro de um par, os valores
xeysão separados por vírgula (ou espaço em branco —220 30 270 210também é válido, mas a forma com vírgula é mais fácil de ler). - As coordenadas são absolutas, medidas a partir do canto superior esquerdo do canvas SVG, onde
yaumenta para baixo.
Assim, points="220,30 270,210 180,230" define três cantos e, como a forma fecha automaticamente, produz um triângulo.
Exemplo do elemento SVG <polygon> com três lados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Aqui o atributo points lista três cantos — 220,30, 270,210 e 180,230 — e o navegador os conecta, fechando a forma em um triângulo.
Estilização: fill, stroke e stroke-width
A aparência visual é controlada por atributos de apresentação. Eles não são específicos de <polygon> — aplicam-se a todas as formas SVG, e cada um tem uma propriedade CSS equivalente, portanto você pode defini-los de forma inline (como em style="..." acima), como atributos simples (fill="yellow"), ou a partir de uma folha de estilos CSS:
fill— a cor usada para pintar o interior da forma.stroke— a cor do contorno.stroke-width— a espessura do contorno, em unidades do usuário.
Por serem propriedades CSS reais, uma regra de folha de estilos como polygon { fill: yellow; stroke: green; } substitui os atributos simples fill/stroke, mas é ela mesma substituída por um style inline.
Exemplo do elemento SVG <polygon> com quatro lados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Adicionar mais pares de coordenadas simplesmente adiciona mais cantos. Os quatro pontos acima produzem um quadrilátero; você pode listar quantos pontos a forma precisar.
Construindo um polígono regular
Um polígono regular (triângulo equilátero, quadrado, pentágono, hexágono, etc.) tem todos os lados e ângulos iguais. Não existe um atributo dedicado para isso — você posiciona os cantos em um círculo manualmente. Para n lados em um círculo de raio r centrado em (cx, cy), cada canto i está em:
x = cx + r * cos(2π * i / n)
y = cy + r * sin(2π * i / n)Na prática, os pontos geralmente são pré-calculados (manualmente ou com um pequeno script) e escritos no atributo points. Os exemplos de triângulo e quadrilátero acima usam coordenadas escolhidas manualmente, portanto seus lados não são exatamente iguais.
Exemplo do elemento SVG <polygon> para criar uma estrela:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Entendendo o fill-rule (por que o centro da estrela fica vazio)
Quando o contorno de uma forma se cruza sobre si mesmo — como ocorre em uma estrela de cinco pontas — o navegador precisa decidir quais regiões fechadas contam como "interior" e devem ser preenchidas. O atributo de apresentação fill-rule controla essa decisão. Ele aceita um de dois valores:
nonzero(o padrão) — usado no exemplo da estrela acima. Para qualquer região, o navegador traça um raio imaginário para fora e conta como o caminho o cruza:+1para cada cruzamento em uma direção,-1para a outra. Se o total for diferente de zero, a região é preenchida. Para uma estrela desenhada em um único traço contínuo, o pentágono interno resulta em uma contagem diferente de zero, portanto é preenchido — a estrela aparece sólida.evenodd— conta os cruzamentos independentemente da direção. Se a contagem for ímpar, a região é preenchida; se for par, ela fica transparente. Com essa regra, o pentágono interno da estrela recebe uma contagem par e permanece vazio.
Portanto, alterar apenas fill-rule:nonzero para fill-rule:evenodd no exemplo da estrela deixa o centro transparente — uma maneira comum de criar um contorno de estrela.
Atributos
| Atributo | Descrição |
|---|---|
points | A lista de pontos (pares de coordenadas absolutas x,y) que definem os cantos do polígono. |
fill-rule | Como regiões com auto-sobreposição são preenchidas: nonzero (padrão) ou evenodd. |
pathLength | O comprimento total que o caminho deve ser tratado como tendo, em unidades do usuário. Definir isso permite que atributos como stroke-dasharray usem valores relativos a esse comprimento em vez do comprimento geométrico real — útil quando você não quer medir a forma exatamente. |
Como todas as formas SVG, <polygon> também aceita os atributos de apresentação fill, stroke e stroke-width, além dos Atributos Globais e dos Atributos de Evento.
Páginas relacionadas
- SVG Polyline — o equivalente de caminho aberto do
<polygon>. - SVG Path —
<path>, o elemento mais flexível para desenhar curvas e formas complexas. - SVG Reference — a lista completa de elementos e atributos SVG.