- SVG | MDN (original) (raw)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The <line> SVG element is an SVG basic shape used to create a line connecting two points.
Usage context
| Categories | Basic shape element, Graphics element, Shape element |
|---|---|
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elements |
Attributes
Defines the x-axis coordinate of the line starting point.Value type: | | ; Default value: 0; Animatable: yes
Defines the x-axis coordinate of the line ending point.Value type: | | ; Default value: 0; Animatable: yes
Defines the y-axis coordinate of the line starting point.Value type: | | ; Default value: 0; Animatable: yes
Defines the y-axis coordinate of the line ending point.Value type: | | ; Default value: 0; Animatable: yes
Defines the total path length in user units.Value type: ; Default value: none; Animatable: yes
DOM Interface
This element implements the SVGLineElement interface.
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>
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LineElement |