• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

3. Basic Shapes > Lines

Lines

SVG lets you draw a straight line with the <line> element. Just specify the x- and y-coordinates of the line’s endpoints. Coordinates may be specified without units, in which case they are considered to be user coordinates, or with units such as em, in, etc. as described in Chapter 2, in Section 2.1. The SVG in Example 3-1 draws several lines; the reference grid in Figure 3-1 is not part of the SVG that you see here.

<line x1="start-x" y1="start-y"
 x2="end-x" y2="end-y">
Example 3-1. Basic lines
<svg width="200px" height="200px" viewBox="0 0 200 200">
   <!-- horizontal line -->
   <line x1="40" y1="20" x2="80" y2="20" style="stroke: black;"/>
   <!-- vertical line -->
   <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black;"/>
   <!-- diagonal line -->
   <line x1="30" y1="30" x2="85" y2="85" style="stroke: black;"/>
</svg>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint