SVG Lines
The line element draws a straight line between two points. It's one of the simplest SVG elements to understand.
The line Element
A line is defined purely by its two endpoints. It has four required attributes:
x1: The x-coordinate of the line's start point.y1: The y-coordinate of the line's start point.x2: The x-coordinate of the line's end point.y2: The y-coordinate of the line's end point.
Because a line has no fill area, you must always add a stroke to make it visible. A line without a stroke will be invisible.
Example: Simple and Dashed Lines
Here is a solid diagonal line and a horizontal dashed line:
Controlling Line Appearance
Line appearance is controlled entirely through stroke-related presentation attributes:
| Attribute | Description |
|---|---|
stroke |
The color of the line. |
stroke-width |
The thickness of the line in pixels. |
stroke-dasharray |
Creates dashed lines. Takes a list of dash and gap lengths (e.g., "10 6" = 10px dash, 6px gap). |
stroke-linecap |
The shape of the line's endpoints: butt (default), round, or square. |
opacity |
Overall transparency (0 = invisible, 1 = fully opaque). |