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.