<line>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

Example

html,
body,
svg {
  height: 100%;
}

html

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

  <!-- If you do not specify the stroke
       color the line will not be visible -->
</svg>

Attributes

x1: Defines the x-axis coordinate of the line starting point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
x2: Defines the x-axis coordinate of the line ending point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
y1: Defines the y-axis coordinate of the line starting point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
y2: Defines the y-axis coordinate of the line ending point. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
pathLength: Defines the total path length in user units. Value type: <number> ; Default value: none; Animatable: yes

Usage context

Categories	Basic shape element, Graphics element, Shape element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # LineElement