SVG Line<line>

In SVG<line>The element is used to draw straight lines, and it is one of the commonly used basic shapes in SVG.

Using<line>The element can create a straight line between two points, and the position, length, and style of the line can be controlled by setting attributes.

Basic Syntax

<line
  x1="x1-coordinate"     <!-- 起点的 x 坐标 -->
  y1="y1-coordinate"     <!-- 起点的 y 坐标 -->
  x2="x2-coordinate"     <!-- 终点的 x 坐标 -->
  y2="y2-coordinate"     <!-- 终点的 y 坐标 -->
  stroke="stroke-color"  <!-- 直线的颜色 -->
  stroke-width="width"   <!-- 直线的宽度 -->
/>

Attribute explanation:

• x1andy1The attribute defines the starting point coordinates of the line.

• x2andy2The attribute defines the ending point coordinates of the line.

• strokeThe attribute defines the color of the line.

• stroke-widthThe attribute defines the width of the line.

The following code draws a straight line with a black stroke and a width of 2 pixels, with starting coordinates (50, 50) and ending coordinates (150, 150).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />
</svg>

Example

Below is the SVG code:

Click to view:View SVG file。

• The x1 attribute defines the start of the line on the x-axis
• The y1 attribute defines the start of the line on the y-axis
• The x2 attribute defines the end of the line on the x-axis
• The y2 attribute defines the end of the line on the y-axis