SVG Line
SVG Line （SVG线）
Description of the <line> element
Description of the <line> element
The SVG <line> element creates lines. Since the <line> elements are geometrically one-dimensional single lines, they do not have any interior. Therefore, they are never filled.
Example of the SVG <line> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="310" width="400">
<line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
</svg>
</body>
</html>
Let’s explain the code above: （我们来解释一下上面的代码：）
The x1 attribute specifies the beginning of the line on the x-axis. （- x1属性指定x轴上的线条开头。）
The y1 attribute specifies the beginning of the line on the y-axis. （- y1属性指定y轴上的线的开始。）
The x2 attribute specifies the end of the line on the x-axis. （- x2属性指定x轴上的线条末端。）
The y2 attribute specifies the end of the line on the y-axis. （- y2属性指定y轴上的线的末端。）
SVG Line vs SVG Path
SVG Line vs SVG Path （SVG线路与SVG路径）
The SVG <line> and <path> elements are similar. However, they have some differences. Particularly, the <line> element draws a single straight line, and the <path> element draws the path of a shape or a line. Moreover, with it, you can draw any shape or line. So it’s more suitable to use the SVG <path> element.
The SVG <line> element also supports the Global Attributes and Event Attributes.