SVG Polyline
Nesta página, você encontra informações sobre o elemento SVG <polyline>, veja exemplos de uso e tente criar um por conta própria.
O elemento SVG <polyline> desenha uma série de segmentos de reta conectados através de uma lista de pontos. Pense nele como "ligar os pontos" com um único traço contínuo: você fornece as coordenadas e ele traça uma linha de cada ponto ao seguinte. É ideal para gráficos de linha, ziguezagues, sparklines e qualquer contorno aberto com múltiplos segmentos.
Esta página explica a sintaxe do atributo points, a única regra de estilo que todo iniciante erra (fill:none), como <polyline> difere de um <polygon> fechado e como controlar a aparência dos cantos e das extremidades da linha. Para a família completa de formas básicas SVG, consulte a Referência SVG.
Descrição do elemento <polyline>
O elemento SVG <polyline> cria uma forma composta apenas por linhas retas que conectam múltiplos pontos. Ao contrário do elemento <polygon> — que automaticamente traça um segmento de fechamento de volta ao primeiro ponto para formar uma forma selada — um <polyline> é uma forma aberta: o último ponto não é conectado de volta ao primeiro. Se você precisar de um contorno fechado (triângulo, hexágono, estrela), use <polygon>. Para formas livres com curvas, use <path>.
A regra mais importante: defina fill:none
Por padrão, toda forma SVG é preenchida com preto sólido (fill:black). Para uma forma fechada isso faz sentido, mas um <polyline> é aberto — e o SVG ainda o preenche traçando uma borda imaginária de fechamento e inundando a área fechada com preto. Este é o erro mais comum entre iniciantes: você espera uma linha fina e obtém um blob preto.
A solução é desativar explicitamente o preenchimento com fill:none e usar stroke para tornar a linha visível:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- WRONG: no fill set, so SVG floods the open shape with black -->
<polyline points="20,20 60,80 100,20 140,80 180,20"
style="stroke:purple;stroke-width:4" />
<!-- RIGHT: fill:none leaves a clean line -->
<polyline points="220,20 260,80 300,20 340,80 380,20"
style="fill:none;stroke:purple;stroke-width:4" />
</svg>
</body>
</html>Quase todo <polyline> que você escrever deve incluir fill:none.
Exemplo do elemento SVG <polyline>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>A sintaxe do atributo points
O atributo points é uma lista plana de pares de coordenadas absolutas, escritos como x,y. Os pontos são desenhados na ordem em que você os lista, e cada x,y é medido a partir do canto superior esquerdo do sistema de coordenadas do SVG (x cresce para a direita, y cresce para baixo).
O SVG é flexível em relação aos separadores entre números — vírgulas e espaços em branco são intercambiáveis. Todos estes definem os mesmos três pontos:
points="30,30 50,35 70,50"
points="30 30 50 35 70 50"
points="30,30, 50,35, 70,50"Uma convenção comum e legível é colocar uma vírgula dentro de cada par e um espaço entre os pares, como em points="30,30 50,35 70,50". Você precisa de um número par de coordenadas; um número ímpar é um erro.
Exemplo do elemento SVG <polyline> com linhas retas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Aqui a escada parece correta porque fill:white coincide com o fundo da página — mas isso é uma armadilha. Em um fundo colorido ou com padrão, o preenchimento branco da forma aberta ficaria visível. Usar fill:none é a escolha robusta.
Exemplo com stroke-linecap e stroke-linejoin:
Duas propriedades de apresentação controlam a aparência de um polyline com traço: stroke-linecap define a forma das duas extremidades abertas da linha (butt, round ou square), e stroke-linejoin define a forma dos cantos onde os segmentos se encontram (miter, round ou bevel). Elas são mais visíveis em traços espessos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- Sharp default: square ends, mitered corners -->
<polyline points="20,40 80,140 140,40"
style="fill:none;stroke:teal;stroke-width:16;
stroke-linecap:butt;stroke-linejoin:miter" />
<!-- Soft: rounded ends and rounded corners -->
<polyline points="200,40 260,140 320,40"
style="fill:none;stroke:tomato;stroke-width:16;
stroke-linecap:round;stroke-linejoin:round" />
</svg>
</body>
</html>Compare o canto pontiagudo da linha esquerda (teal) com o canto suave da linha direita (tomato). Para explorar essas e outras opções de traço em profundidade, consulte SVG Stroking.
Atributos específicos do <polyline>
Apenas dois atributos pertencem genuinamente ao elemento <polyline> em si — o restante que você define nele (fill, stroke, stroke-width e assim por diante) são propriedades de apresentação herdadas do modelo geral de apresentação do SVG, abordadas separadamente abaixo.
| Atributo | Descrição |
|---|---|
| points | A lista de pontos (pares de coordenadas absolutas x,y) que definem o polyline. Este é o único atributo obrigatório. |
| pathLength | O comprimento total da linha em unidades do usuário, usado para calibrar efeitos de traço (como tracejados). |
Propriedades de apresentação (herdadas, não específicas do polyline)
fill, stroke, stroke-linecap e stroke-linejoin não são exclusivos do <polyline> — são propriedades de apresentação CSS que se aplicam à maioria dos elementos gráficos SVG e podem ser definidas tanto como atributos XML (stroke="purple") quanto via CSS (style="stroke:purple"). Elas são herdadas e substituíveis como qualquer outro CSS, razão pela qual são listadas aqui em vez de como atributos do elemento.
| Propriedade | Descrição |
|---|---|
| fill | A cor usada para preencher o interior (fechado automaticamente). Defina fill:none para uma linha aberta. |
| stroke | A cor da própria linha. |
| stroke-width | A espessura da linha. |
| stroke-linejoin | O tipo de canto criado onde dois segmentos se encontram: miter, round ou bevel. |
| stroke-linecap | A forma das extremidades abertas da linha: butt, round ou square. |
O elemento SVG <polyline> também suporta os Atributos Globais e os Atributos de Eventos.