{"id":9301,"date":"2022-10-06T04:40:28","date_gmt":"2022-10-06T04:40:28","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9301"},"modified":"2022-10-06T04:40:28","modified_gmt":"2022-10-06T04:40:28","slug":"svg-polygon","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/svg-polygon\/","title":{"rendered":"SVG Polygon"},"content":{"rendered":"\n

Description of the <polygon> element<\/h2>\n\n\n\n

The SVG <polygon> element creates a graphic containing at least three sides.<\/p>\n\n\n\n

Polygons consist of straight lines, which are connected up, and its shape is “closed”.<\/p>\n\n\n\n

Example of the SVG <polygon> element with three sides:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <svg width=\"400\" height=\"250\" >\n      <polygon points=\"220,30 270,210 180,230\" style=\"fill:yellow;stroke:green;stroke-width:3\" \/>\n      Sorry, inline SVG isn't supported by your browser.\n    <\/svg>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
In this example the points attribute specifies the x and y coordinates for each corner of our polygon.<\/p>\n\n\n\n
Example of the SVG <polygon> element with four sides:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <svg width=\"400\" height=\"300\">\n      <polygon points=\"230,20 310,220 180,260 133,244\" style=\"fill:yellow;stroke:pink;stroke-width:5\" \/>\n      Sorry, inline SVG isn't supported by your browser.\n    <\/svg>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example of the SVG <polygon> element for creating a star:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <svg width=\"400\" height=\"230\" >\n      <polygon points=\"110,20 50,208 200,88 20,88 170,208\" style=\"fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;\"\/>\n      Sorry, inline SVG isn't supported by your browser.\n    <\/svg>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Attributes<\/h2>\n\n\n\n
Attribute<\/th>Description<\/th><\/tr><\/thead>
points<\/td>This attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polygon.<\/td><\/tr>
pathLength<\/td>This attribute specifies the total length for the path, in user units.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
The SVG <polygon> element also supports the\u00a0Global Attributes\u00a0and\u00a0Event Attributes.<\/p>\n","protected":false},"excerpt":{"rendered":"
Description of the <polygon> element The SVG <polygon> element creates a graphic containing at least three sides. Polygons consist of straight lines, which are connected up, and its shape is “closed”. Example of the SVG <polygon> element with three sides: In this example the points attribute specifies the x and y coordinates for each corner of our […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[574],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9301"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9301"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9301\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}