Line Segments

Tag description:

The <line/> tag represents a line segment joining points (x₁, y₁) to (x₂, y₂).

Example:

Source code:

Source of line.svg:Hide line numbers

1: <svg version="1.1" baseProfile="full"
2:      xmlns="http://www.w3.org/2000/svg" 
3:      width="300px" height="200px" viewBox="0 0 300 200">
4:      
5: <line x1="10" y1="10" x2="290" y2="190" stroke="purple" stroke-width="20px"/>
6: <line x1="10" y1="50" x2="230" y2="190" stroke="green" stroke-width="10px"/>
7: 
8: </svg>
9:

Source of line.svg:Show line numbers

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg" 
     width="300px" height="200px" viewBox="0 0 300 200">
     
<line x1="10" y1="10" x2="290" y2="190" stroke="purple" stroke-width="20px"/>
<line x1="10" y1="50" x2="230" y2="190" stroke="green" stroke-width="10px"/>

</svg>

References:

This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Creative Commons License