Skip to main content

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 polyline Example (x=70)(y=10) (x=70)(y=100) (x=170)(y=100)
<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 polyline Shape Example
<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 polyline fill color 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 polyline Animation Color 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 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 basic polyline  Example
<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>




Comment

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