SVG Line

A <line> element are used to draw a line. In SVG we are draw a line using two points. start point and end point . start point is pair of (x1-coordinate and y1-coordinates). similarly endpoint also have two coordinates (x2 & y2).

Syntax

  <line x1="start-point-x-coordinate" y1="start-point-y-coordinate"
        x1="end-point-x-coordinate" y1="end-point-y-coordinate">
      
  </line>

For example make basic SVG line.

  <svg height="200" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <line x1="10" y1="130" x2="200" y2="30" stroke="green" stroke-width="5px" ></line>
</svg>

SVG stroke-linecap

<svg height="170" width="90"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <line x1="10" y1="130" x2="10" y2="30" stroke="salmon" stroke-width="12px" stroke-linecap="butt"></line>
    <line x1="30" y1="130" x2="30" y2="30" stroke="#c79892" stroke-width="12px" stroke-linecap="square"></line>
    <line x1="50" y1="130" x2="50" y2="30" stroke="darkgray" stroke-width="12px" stroke-linecap="round"></line>
</svg>

SVG Line animation

Change line color animation.

<svg height="200" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <line x1="10" y1="30" x2="200" y2="130" stroke="green" stroke-width="5px" >
  <animate attributeName="stroke"
          values="green;blue;red;pink;orange;" begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>
</svg>

Move line animation

<svg height="160" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >

  <line stroke-dasharray='6 2' x1="10" y1="30"  x2="200" y2="30" 
        stroke="#9c27b0" stroke-width="3px" >
  <animate attributeName="x1"
        from="30" to="200"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>
    <line  x1="10" y1="30" stroke-dasharray='6 2' x2="200" y2="90" stroke="#3f51b58c" stroke-width="3px" >
  <animate attributeName="x2"
        from="200" to="10"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  <animate attributeName="x1"
        from="30" to="200"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>
  
  <line stroke-dasharray='6 2'  x1="10" y1="90"  x2="200" y2="90" stroke="#9c27b0" stroke-width="3px" >
<animate attributeName="x2"
        from="200" to="10"   begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </line>   
</svg>

Rotate line arround a circle

<svg width="150px" height="130px">
  <!-- center of rotation -->

 <circle cx="50" cy="50" fill="#ffeb3b" stroke="pink" r="40" stroke="blue" ></circle>
    <circle cx="50" cy="50" r="3" stroke="blue" fill="blue"></circle>
  <g>
    <line stroke="blue" x1="50" y1="50" x2="90" y2="50"></line>
    <polygon fill="blue" points="90 50, 85 45, 85 55"></polygon>
    <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            begin="4s"
            dur="10s"
            repeatCount="indefinite"></animateTransform>
  </g>
   <g transform="rotate(45, 50, 50)">
    <line stroke="blue" x1="50" y1="50" x2="90" y2="50"></line>
    <polygon fill="red" points="90 50, 85 45, 85 55"></polygon>
     <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            dur="8s"
            repeatCount="indefinite"></animateTransform>
  </g>
</svg>