Desenhar Linha Reta com <line> no SVG

O elemento <line> do SVG é uma forma básica do SVG, usada para criar uma linha que conecta dois pontos. O elemento <line> é usado para desenhar linhas dentro de uma imagem SVG. Pode desenhar linhas retas horizontais, verticais, diagonais, etc.

Exemplo online de SVG line

Aqui estão alguns exemplos comuns de SVG <line> para desenhar linhas direitas:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<line　x1="0"　　y1="10"　x2="0"　　　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="10"　y1="10"　x2="100"　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="20"　y1="10"　x2="100"　y2="50"　　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="30"　y1="10"　x2="110"　y2="10"　　style="stroke:#006600;"></line>
</svg>

O efeito da linha após a execução do código é o seguinte:

O ponto inicial da linha é definido por x1e y1O ponto onde a propriedade é definida.
O ponto final da linha é definido por x2e y2O ponto onde a propriedade é definida.
A propriedade style define a cor e espessura da linha (contorno).