Skip to main content

SVG Polygon

<polygon> are used to draw graphics. there will be required at least 3 coordinate points to make a shape. Every coordinate is pair of (x-axis and y-axis). the syntax of given below.

<polygon points="coordinates-pair"></polygon>

For example create a triangle.

SVG polygon Example Polygon example (150,50) (250,150) (50,150)

In this diagram (x=150 y=100),(x=150 y=100),(x=150 y=100) is coordinates. we can also used more than 3 coordinates.

SVG polygon Example
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polygon stroke-width="2" fill="green" points="150 50,250 150,50 150 "></polygon>
</svg>

Example 1

Polygon make arrow
  <svg height="260" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <polygon points="100 100, 200 100, 170 70,190 70,230 110, 190 150,170 150,200 120,100 120" stroke="blue" fill="none"></polygon>
  </svg>

Example 2

Polygon Demo Example
<svg height="320" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polygon points="150 10, 187.5 47.5,187.5 85,225 85,225 123.5,260 123.5,298 161,260 198.5,225 198.5,225 236,187.5 236,187.5 273.5,150 311,112.5 273.5,112.5 236,75 236,75 198.5,37.5 198.5,0 161, 37.5 123.5,75 123.5, 75 86, 113.5 86,113.5 48.5" stroke="#9c27b0" stroke-width="2" fill="none"></polygon>
</svg>

SVG Polygon Animation

SVG Polygon animate
<svg height="320" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <polygon stroke-width="2" stroke-dasharray="10 10"  points="150 10, 187.5 47.5,187.5 85,225 85,225 123.5,260 123.5,298 161,260 198.5,225 198.5,225 236,187.5 236,187.5 273.5,150 311,112.5 273.5,112.5 236,75 236,75 198.5,37.5 198.5,0 161, 37.5 123.5,75 123.5, 75 86,113.5 86,113.5 48.5" stroke="blue" fill="azure">
    <animate attributeName="stroke-dashoffset" from="0" to="200" begin="1s" dur="19s" repeatCount="20"></animate>  
   </polygon>
</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