svg element

<line>

View on MDN ↗

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

Usage context

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

DOM Interface

This element implements the SVGLineElement interface.

Example

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

<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>

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.