+ 16

Guys please explain svg polygon points???

how do this work??🤔🤔🤔🤔

19th Dec 2017, 5:47 PM
Aidaan Aziz 🇮🇳🇮🇳
Aidaan Aziz 🇮🇳🇮🇳 - avatar
14 Antworten
+ 8
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.
19th Dec 2017, 6:40 PM
Dipti Muni
Dipti Muni - avatar
+ 7
thanks a lot sweetdee789
24th Dec 2017, 10:05 PM
</>
19th Dec 2017, 5:52 PM
James16
James16 - avatar
+ 6
try this if you are unable to understand.. take a paper draw (+ ) means y' | | x'-------------------x | | y
24th Dec 2017, 10:06 AM
Yesh Jadav
Yesh Jadav - avatar
+ 6
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 ;)
24th Dec 2017, 5:01 PM
Davit Arakelyan
Davit Arakelyan - avatar
+ 6
Thank you all! I just unlocked my first good answer badge! 😊
24th Dec 2017, 10:09 PM
Dipti Muni
Dipti Muni - avatar
19th Dec 2017, 6:01 PM
💻Amey💻
💻Amey💻 - avatar
+ 4
ok bro thnx...
24th Dec 2017, 10:30 AM
Aidaan Aziz 🇮🇳🇮🇳
Aidaan Aziz 🇮🇳🇮🇳 - avatar
+ 4
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👀
24th Dec 2017, 12:49 PM
shikamaru nara
shikamaru nara - avatar
+ 2
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.
24th Dec 2017, 9:50 AM
Yesh Jadav
Yesh Jadav - avatar
+ 2
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.
24th Dec 2017, 10:03 AM
Yesh Jadav
Yesh Jadav - avatar
+ 2
your welcome
24th Dec 2017, 11:29 AM
Yesh Jadav
Yesh Jadav - avatar
+ 1
bro how to know about points...
24th Dec 2017, 9:55 AM
Aidaan Aziz 🇮🇳🇮🇳
Aidaan Aziz 🇮🇳🇮🇳 - avatar
0
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> .
6th Jul 2018, 2:14 PM
Александр Домников
Александр Домников - avatar