CODEWITHSUNDEEP
htmlsvg
Avinash Solanki
Avinash Solanki

Reputation: 1101

how to define html5 svg polygon points to create graphics

Hi i am trying to find out how to define the points for a polygon in HTML5

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

this will end up creating a Star image. i tried to remove some points and add some arbitrary points and it doesn't create any image.i tried with three points also but it didn't worked out.

Upvotes: 4

Views: 5757

Answers (1)

Robert Longson
Robert Longson

Reputation: 124299

The values are in pairs, each pair is an (x, y) co-ordinate of a polygon vertex.

200, 10 is 200 units away from the origin in the x direction (across) and 10 units in the y direction (down).

Upvotes: 6

Related Questions