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)