SVG <line> Draw Line

The SVG <line> element is a basic SVG shape used to create a line connecting two points. The <line> element is used to draw lines within SVG images. It can draw horizontal lines, vertical lines, diagonal lines, and more.

SVG line online example

Here are some simple examples of using SVG <line> to draw lines:

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

The line effect after running the above code is as follows:

The starting point of the line is determined by x1and y1The point where the attribute is set.
The end point of the line is determined by x2and y2The point where the attribute is set.
The style attribute sets the color and thickness of the stroke (line).