Guys please explain svg polygon points???

Question

how do this work??🤔🤔🤔🤔

Answer 1

In HTML,

From this example (from https://www.w3schools.com/graphics/svg_polygon.asp. )you can see:

<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

SVG is a tag that holds the shape that will be formed.

Inside the svg open tag, you define what the width and height will be for your shape.

POLYGON as you know means more than 3 sides. Polygon tag doesn't have closing tag. Instead you put / at the end.

Inside this polygon tag you define points and style.

POINTS attributes define the corners of shape. They are in (x,y) coordinates and the units are measured in pixels. So in above example, the first coordinate point is (220,10) which means start at 220 pixels to the right (x-axis) and 10 pixels down (y-axis). You connect this starting point to next one (300,210). Once you have all the points dotted, you connect the dots.

STYLE attribute defines what color to fill in the shape with and how long stroke should be and what color.

Answer 2

thanks a lot sweetdee789

Answer 3

Look ↓↓↓:)
https://www.w3schools.com/graphics/svg_polygon.asp

Answer 4

try this if you are unable to understand..
take a paper draw (+ ) means

y'
|
|
x'-------------------x
|
|
y

Answer 5

don't waste your time on understanding it my friend, there are so many online svg poligon creators, so you don't need to deeply understand the points ;)

Answer 6

Thank you all! I just unlocked my first good answer badge! 😊

Answer 7

http://tutorials.jenkov.com/svg/polygon-element.html
Here it looks easy :)

Answer 8

ok bro thnx...

Answer 9

its enough to imagine the points and the distance between them
its like drawing on a paper then imagining the increasment and decreasments between the point distances that you did draw 😊
its exactly like working on VB6 when drawing circles or line in a well defined scale of the picture
ex:if i have 100 picture scale i will be sure that 50 will be exactly in the middel of your picture and so on👀

Answer 10

In HTML,

<svg height="260" width="300">
<polygon points="220, 300,210 ,170,250 " style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
height defines the length of the polygon.
width defines the size of the polygon.
points defines the angle from which a polygon can derive .
style defines the color inside the polygon.
stroke defines the color drawn of the sides of the polygon.
stroke defines the drawn sides of which length polygon will show.

Answer 11

it depends on the x and y co ordinates ..That is because the  polygon element draws lines between all points, including a line from the last point back to the first.

Answer 12

your welcome

Answer 13

bro how to know about points...

Answer 14

By the way. Does this method is really being used nowadays? It seems that it's easier to draw it in Ai or Ps and paste as an <img> .