line

osbo.com | SVG | Elements | line

The line SVG element specifies a line segment that starts at one point and ends at another.

Specifies the total length of the path in user units.

<number>

(none)

Specifies the x-coordinate of the start of the element.

<length-percentage> | <number>

0

Specifies the x-coordinate of the end of the element.

<length-percentage> | <number>

0

Specifies the y-coordinate of the start of the element.

<length-percentage> | <number>

0

Specifies the y-coordinate of the end of the element.

<length-percentage> | <number>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke: black; stroke-dasharray: 1; stroke-width: 10; } </style> <line pathLength="10" x2="100%" y2="100%"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke-width: 10; } line:nth-of-type(1) { stroke: black; } line:nth-of-type(2) { stroke: red; } </style> <line x1="100%"/> <line x1="100"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke: black; stroke-width: 10; } </style> <line x1="1e2"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke-width: 10; } line:nth-of-type(1) { stroke: black; } line:nth-of-type(2) { stroke: red; } </style> <line x2="100%"/> <line x2="100"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke: black; stroke-width: 10; } </style> <line x2="1e2"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke-width: 10; } line:nth-of-type(1) { stroke: black; } line:nth-of-type(2) { stroke: red; } </style> <line y1="100%"/> <line y1="100"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke: black; stroke-width: 10; } </style> <line y1="1e2"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke-width: 10; } line:nth-of-type(1) { stroke: black; } line:nth-of-type(2) { stroke: red; } </style> <line y2="100%"/> <line y2="100"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> line { stroke: black; stroke-width: 10; } </style> <line y2="1e2"/> </svg>

circle

ellipse

polygon

polyline

rect

World Wide Web Consortium (W3C)