SVG <polyline>

SVG Linha - <polyline>

Exemplo 1

<polyline> O elemento é usado para criar qualquer forma composta apenas por linhas (conexão entre múltiplos pontos):

Este é o código SVG:

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

Experimente você mesmo

Explicação do código:

• A propriedade 'points' define a lista de pontos necessários para desenhar a linha (par de coordenadas x e y)

Exemplo 2

Outro exemplo com apenas linhas:

Este é o código SVG:

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4" />
</svg>

Experimente você mesmo