SVG - (Straight) Line

Card Puncher Data Processing

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)

Element

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>

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>





Discover More
Card Puncher Data Processing
SVG - Line

in Svg. See: line.defined shows gaps for missing or invalid data
Card Puncher Data Processing
SVG - Path

in Svg. Path is the generic element to define a shape. polylines The shape of a path element is defined by one attribute: d that contains a suite of . All of the commands also come in two variants....
Utah Teapot
Viz - Stroke

stroke means painting along the outline of the object. A stroke operator is a line along a path. For each straight or curved segment in the path, the stroked line is centered on the segment with sides...



Share this page:
Follow us:
Task Runner