SVG Tutorial
SVG Introduction
SVG Examples
SVG Simple Example
SVG in Web Browsers
SVG Coordinate System
 
SVG svg
SVG g
SVG rect
SVG circle
SVG ellipse
SVG line
SVG polyline
SVG polygon
SVG path
SVG marker
SVG text
SVG tspan
SVG tref
SVG textpath
SVG switch
SVG image
SVG a
SVG defs
SVG symbol
SVG use
 
SVG and CSS
SVG Stroke
SVG Fill
SVG Viewport and View Box
SVG Animation
SVG Scripting
SVG Transformation
SVG Gradients
SVG Fill Patterns
SVG Clip Path
SVG Mask
SVG Filters
 
 


SVG line element

Connect with me:  
  Jenkov.com - News

The SVG <line> element is used to draw lines. Here are a few simple examples:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>
    <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
    <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
    <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>

Here is the resulting image:

The line begins at the point set by the x1 and y1 attributes.

The line ends at the point set by the x2 and y2 attributes.

The style attribute sets the color and thickness of the stroke (the line). Style attributes are covered in more detail in a different text.


NextNext : SVG polyline

Connect with me:
     
Newsletter - Get all my free tips!