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 Line example
  <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 Line stroke linecap example
<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 Line Color
<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 Move Line
<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 rotate line
<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>


Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment







© 2021, kalkicode.com, All rights reserved