Dibujar una línea recta con SVG <line>

El elemento <line> de SVG es una forma básica de SVG, utilizada para crear una línea que conecta dos puntos. El elemento <line> se utiliza para dibujar líneas dentro de imágenes SVG. Puede dibujar líneas horizontales, verticales, oblicuas, entre otras

Ejemplo en línea de SVG line

A continuación, se presentan algunos ejemplos sencillos y comunes de línea SVG <line> para dibujar líneas rectas:

<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>

El efecto de la línea recta después de ejecutar el código es el siguiente:

El punto de partida de la línea recta se determina por x1y1El punto en el que se establece la propiedad.
El punto final de la línea recta se determina por x2y2El punto en el que se establece la propiedad.
La propiedad del estilo de esta línea de estilo establece el color y el grosor del trazo (línea).