Please can anyone explain the SVG polygon points?
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.
Related videos on Youtube
kernal_lora
Research is what I'm doing when I don't know what I'm doing. That's what I Love Research and Development. Believe me.. Describe myself in one word is a tough one !! really can’t do that, it is very hard to describe myself. Infact I am still getting to know myself !! But one thing I am not like you and you also not like me. Talk to me then you will get to know. Enjoying the learning curve...... ;-) Read more about me here --> https://udayappam.github.io/
Updated on September 26, 2022Comments
-
kernal_lora over 1 year
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?
-
kernal_lora over 7 yearsMaky- 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 about 5 yearsfinally a good explanation, thanks a lot.
-
swedge218 over 4 yearsThe only good explanation online :)
-
Shahriar over 3 yearsThe link returns 404
-
Danyl Filatov over 2 yearsThanks so much, it was so confusing to me that the Y coordinate pointed down!