SVG <line>
SVG Line - <line>
The <line> element is used to create a
line.
The <line> element creates a line between
the start position (x1,y1) and the end position (x2,y2).
The <line> element has four basic attributes to position and set the
length of the line:
| Attribute | Description |
|---|---|
| x1 | The start of the line on the x-axis |
| y1 | The start of the line on the y-axis |
| x2 | The end of the line on the x-axis |
| y2 | The end of the line on the y-axis |
An SVG Line
The following example creates a line from position (0,0) to (300,200):
Here is the SVG code:
Example
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="200" style="stroke:red;stroke-width:2" />
</svg>
Try it Yourself »
Code explanation:
- The
<x1>and<y1>attributes define the start of the line (0,0) - The
<x2>and<y2>attributes define the end of the line (300,200)
A Horizontal Line
The following example creates a thick horizontal line from position (0,10) to (250,10):
Here is the SVG code:
Example
<svg height="50" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="250" y2="10" style="stroke:red;stroke-width:12" />
</svg>
Try it Yourself »
Code explanation:
- The
<x1>and<y1>attributes define the start of the line (0,10) - The
<x2>and<y2>attributes define the end of the line (250,10)
A Vertical Line
The following example creates a thick vertical line from position (0,0) to (0,200):
Here is the SVG code:
Example
<svg height="210" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="0" y2="200" style="stroke:red;stroke-width:14" />
</svg>
Try it Yourself »
Code explanation:
- The
<x1>and<y1>attributes define the start of the line (0,0) - The
<x2>and<y2>attributes define the end of the line (0,200)
