Please can anyone explain the SVG polygon points?

Question

I need to know SVG polygon points, how those works. Can anyone give clear explanation or other links where I can get clear explanation.

IF possible explain how these polygon points working internally, I mean what algorithem it was using?

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

Update-: The main intention behind this question is how polygon taking the points attributes and how it was rendering in the browser as polygon?

Solution

The polygon takes a list of points (ref here) which are the X and Y coordinates of each pair.

In your example, you have

points="100,10 40,198 190,78 10,78 160,198"

This is five "corners" starting at (100,10), with a line from there to (40, 198) and so on. The final point joins the first point to make a closed polygon.

The docs tell us "Each point is define by a X and a Y coordinate in the user coordinate system." The units are pixels and "the initial viewport coordinate system (and therefore the initial user coordinate system) has its origin at the top/left of the viewport, with the positive x-axis pointing towards the right, the positive y-axis pointing down" (from here)

So, 100, 10 is 100 pixels right and 10 down.

Comments

[kernal_lora]

Maky- Thank you for your quick response. This is not I'm looking for, I'm looking for each point(x and y coordinates) explanation. Eg: 100,10 40,198 190,78 10,78 160,198 in the above co-ordinates what 100,10 denotes, 40,198 denotes like that i need to know each point

[SlimenTN]

finally a good explanation, thanks a lot.

[swedge218]

The only good explanation online :)

[Shahriar]

The link returns 404

[Danyl Filatov]

Thanks so much, it was so confusing to me that the Y coordinate pointed down!