SVG Polyline

Polyline are used to draw lines inside svg. this are using of x and y coordinates to draw line. (x-axis and y-axis) are used to define line points.

<polyline points="x1 y1, x2  y2" ></polyline>
Here
(x1,y1) : Start point of line
(x2,y2) : End point of line

Note that we can provide any number of x and y pair. and number of draw line are (pair -1). because first line draw need two pair of points. look at this example.

<svg height="120" width="220" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- Draw polyline -->
 <polyline points="70 10, 70 100,170 100" stroke-width="3" fill="none" stroke="#e639c9e6"></polyline>

<!-- Explained the draw of polygon points -->
 <circle cx=70 cy=10 r=5 fill=red></circle>  
 <circle cx=70 cy=100 r=5 fill=blue></circle>  
 <circle cx=170 cy=100 r=5 fill=gray></circle> 
  <text x=80 y=20 fill='red' font-size=16><tspan>(x=70)</tspan><tspan x=80 y=40>(y=10)</tspan></text>
  
  <text x=13 y=70 fill='blue' font-size=16><tspan>(x=70)</tspan><tspan x=13 y=90>(y=100)</tspan></text>
   <text x=130 y=70 fill='gray' font-size=16><tspan>(x=170)</tspan><tspan x=130 y=90>(y=100)</tspan></text>
</svg>

Example 1

<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polyline points="10 10,30 10,30 30, 50 30,50 10,70 10,70 30,90 30,90 10,110 10,110 30,130 30,130 10, 150 10, 150 70,130 70,130 50,110 50,110 70,90 70, 90 50, 70 50,70 70, 50 70,50 50, 30 50, 30 70, 10 70,10 10" stroke-width="3" fill="none"  stroke="firebrick"></polyline>
</svg>

SVG Polyline Fill Example

<svg height="160" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polyline points="20 20, 220 20 220 110,120 150,20 110,20 20" stroke-width="3"  stroke-linejoin="miter" stroke="firebrick" fill="#f0fff0"></polyline>
</svg>

SVG Polyline Animation

We can animates almost elements of svg. polyline is one of this. here given few basic examples of animate svg polyline.

<svg height="160" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polyline stroke-dasharray="10" points="20 20, 220 20 220 110,120 150,20 110,20 20" stroke-width="4"  stroke-linejoin="miter" stroke="firebrick" fill="none">
  <animate attributeName="fill" values="white;blue;pink;#7fff00a6" begin="5s" dur="3s"  repeatCount="indefinite"></animate>
   <animate attributeName="stroke-dashoffset" from="200" to="0" begin="1s" dur="8s"  repeatCount="indefinite"></animate>
  </polyline>
</svg>

Example 2

<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polyline id="ptr" points="10 10,30 10,30 30, 50 30,50 10,70 10,70 30,90 30,90 10,110 10,110 30,130 30,130 10, 150 10, 150 70,130 70,130 50,110 50,110 70,90 70, 90 50, 70 50,70 70, 50 70,50 50, 30 50, 30 70, 10 70,10 10" stroke-width="2" fill="none"  stroke="blue"></polyline>
<circle fill="none" stroke="green" stroke-width="3"   r=7>
  <animateMotion
              path="M10 10 L30 10 L30 30 L50 30 L50 10 L70 10 L70 30 L90 30 L90 10 L110 10 L110 30 L130 30 L130 10 L 150 10 L 150 70 L130 70 L130 50 L110 50 L110 70 L90 70 L 90 50 L 70 50 L70 70 L 50 70 L50 50 L 30 50 L 30 70 L 10 70 L10 10" begin="0s" dur="15s" repeatCount="indefinite" rotate="auto"></animateMotion>
   </circle>
</svg>