Vachmi

The <line> element is a basic SVG shape to draw lines joining two points.

Here is the SVG code to draw this line.

<svg width="200" height="150">
  <line x1="20" y1="20" x2="100" y2="100" style="stroke:black;" />
</svg>

Code Explanation

• The line begins at a point set by x1 and y1 coordinates.

• The line ends at a point set by x2 and y2 coordinates.

• The CSS stroke property defines the color of the line.

Attributes

x1 - The x coordinate of the starting point of the line

It can accept a length or a percentage or a number as its value. Default Value: 0


y1 - The y coordinate of the starting point of the line

It can accept a length or a percentage or a number as its value. Default Value: 0


x2 - The x coordinate of the ending point of the line

It can accept a length or a percentage or a number as its value. Default Value: 0


y2 - The y coordinate of the ending point of the line

It can accept a length or a percentage or a number as its value. Default Value: 0