Desenhar Curvas com SVG <polyline>

O elemento polyline é uma forma básica do SVG, usada para criar uma série de retas conectando vários pontos. Um polyline típico é usado para criar um formato aberto, onde o último ponto não está conectado ao primeiro ponto

Exemplo de linha reta

Exemplo de código de linha reta a seguir:

<svg width="120" altura="120"　
　　　　　viewPort="0 0　120　120" versão="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg>
　　　　<polyline fill="none" stroke="black"　
　　　　　　　　　　　　　　points="20,100　40,60　70,80　100,20"/>
</svg>

O efeito após a execução é o seguinte:

Desenhar triângulo

Exemplo de código a seguir:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;"/>
</svg>

Visualização do efeito após a execução:

várias linhas identificadas por pontos. Cada ponto está listado em points atributo com x, y. Este exemplo tem3pontos, que definem um triângulo.
Definir3pontos conectados por linhas, em seguida, preenchido. A cor de preenchimento padrão é preta.

Desenhar um triângulo preenchido com verde

Exemplo de código a seguir:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600;　stroke-width:　2;
　　　　　　　　　　　　　　　fill: #33cc33;"/>
</svg>

Visualização do efeito após a execução:

Você pode ter notado que apenas duas linhas do triângulo são desenhadas com a cor de traçado (verde escuro). A razão disso é que apenas as linhas entre os pontos listados são desenhadas. Não há linha que volte ao primeiro ponto. Para isso, o points adiciona o primeiro ponto novamente na propriedade, conforme mostrado:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="10,2　　60,2　　35,52　　10,2"
　　　　　　　　style="stroke:#006600; fill: #33cc33;"/>
</svg>

A propriedade style define a cor e a espessura da linha de traçado (linha) e a cor de preenchimento.