SVG Line

SVG (Scalable Vector Graphics) is a markup language used for creating vector graphics. To create a line in SVG, you can use the <line> element.

Here's an example of a basic line in SVG:

<svg viewBox="0 0 100 100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
</svg>

Let's break down the code:

The <svg> element defines the SVG container, and the viewBox attribute sets the size of the container.
The <line> element creates the line.
The x1 and y1 attributes specify the coordinates of the starting point of the line.
The x2 and y2 attributes specify the coordinates of the ending point of the line.
The stroke attribute sets the color of the line.
The stroke-width attribute sets the width of the line.

You can also add other attributes to the <line> element, such as stroke-dasharray to create a dashed line, or stroke-linecap to change the shape of the line ends.

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>

SVG Line

SVG stroke-linecap

SVG Line animation

Comment

New Comment