SVG - (Straight) Line

1 - About

You can draw a straight line in SVG with the following two elements:

If you want to add a arrow head or polymarkers, see SVG - Marker (arrowheads or polymarkers)

3 - Element

3.1 - Line

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


<svg>
<line 
     x1="0" 
     y1="0" 
     x2="600" 
     y2="0" 
     stroke="black"
     stroke-width="6"
     />
<line 
     x1="0" 
     y1="0" 
     x2="0" 
     y2="600" 
     stroke="black"
     stroke-width="3"
     />
</svg>


3.2 - Path

See Path - Draw a straight line

Example:


<svg width="310" height="30" xmlns="http://www.w3.org/2000/svg">

  <path d="M 10 10 L 300 10" stroke="#000"/>

</svg>


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap