The <line> element is an SVG basic shape used to create a line connecting two points.

Example

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

Attributes

• stroke

The stroke attribute is a presentation attribute defining the color used to paint the outline of the shape;

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <line x2="120" y1="10" y2="10"  stroke="#000000"/>
   <line x2="120" y1="30" y2="30"   stroke="#00ff00"/>
   <line x2="120" y1="50" y2="50"   stroke="#0000ff"/>
</svg>

• stroke-width

The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
 <circle cx="25" cy="25" r="25" fill="#ff0000" stroke="#000000" stroke-width="2"/>
  <circle cx="85" cy="25" r="25" fill="#ff0000" stroke="#00ff00" stroke-width="4"/>
  <circle cx="150" cy="25" r="25" fill="#ff0000" stroke="#0000ff" stroke-width="6"/>
</svg>

• stroke-opacity

The stroke-opacity attribute is a presentation attribute defining the opacity applied to the stroke of a shape.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <line x2="120" y1="10" y2="10"  stroke="#000000" stroke-width="6" stroke-opacity="0.1"/>
   <line x2="120" y1="30" y2="30"   stroke="#000000" stroke-width="6" stroke-opacity="0.5"/>
   <line x2="120" y1="50" y2="50"   stroke="#000000" stroke-width="6" stroke-opacity="1"/>
</svg>

• stroke-dasharray

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <line x2="200" y1="10" y2="10"  stroke="#000000" stroke-width="2" stroke-dasharray="4" />
   <line x2="200" y1="30" y2="30"   stroke="#000000" stroke-width="2" stroke-dasharray="8"/>
   <line x2="200" y1="50" y2="50"   stroke="#000000" stroke-width="2" stroke-dasharray="4 2 8"/>
</svg>

• stroke-linecap

The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <line x2="200" y1="10" y2="10"  stroke="#000000" stroke-width="8" stroke-linecap="butt" />
   <line x2="200" y1="30" y2="30"   stroke="#000000" stroke-width="8" stroke-linecap="round"/>
   <line x2="200" y1="50" y2="50"   stroke="#000000" stroke-width="8" stroke-linecap="square"/>