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

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

The SVG <rect> element creates a rectangle, as well as rectangle shape variations. It is possible to draw rectangles of various height, width, with different stroke and fill colors, etc. We are going to try some examples.<\/p>\n\n\n\n

Example of the SVG <rect> element:<\/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=\"350\" height=\"120\">\n      <rect width=\"250\" height=\"110\" style=\"fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)\" \/>\n    <\/svg>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Now let\u2019s explain this code:<\/p>\n\n\n\n
  • The\u00a0width\u00a0and\u00a0height\u00a0attributes specify the height and the width of the rectangle.<\/li>
  • The\u00a0style\u00a0attribute specifies some CSS properties for the rectangle.<\/li>
  • The\u00a0CSS fill\u00a0property specifies the fill color of the rectangle.<\/li>
  • The\u00a0CSS stroke-width\u00a0property is used to specify the width of the rectangle\u2019s border.<\/li>
  • The\u00a0CSS stroke\u00a0property specifies the color of the rectangle\u2019s border.<\/li><\/ul>\n\n\n\n
    Example of the SVG <rect> element with the x and y attributes:<\/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      <rect x=\"80\" y=\"50\" width=\"180\" height=\"180\" style=\"fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9\" \/>\n      Sorry, inline SVG isn't supported by your browser.  \n    <\/svg>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Let\u2019s explain the code above:<\/p>\n\n\n\n
    • The x attribute specifies the left position of the rectangle.<\/li>
    • The y attribute specifies the top position of the rectangle.<\/li>
    • The CSS fill-opacity property specifies the opacity of the fill color.<\/li>
    • The CSS stroke-opacity property specifies the opacity of the stroke color.<\/li><\/ul>\n\n\n\n
      Example of the SVG <rect> element with the CSS opacity property:<\/h3>\n\n\n\n
      <!DOCTYPE html>\n<html>\n  <body>\n    <svg width=\"400\" height=\"180\">\n      <rect x=\"50\" y=\"20\" width=\"150\" height=\"150\" style=\"fill:blue;stroke:pink;stroke-width:5;opacity:0.5\" \/>\n      Sorry, inline SVG is not supported by your browser.  \n    <\/svg>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
      Example of the SVG <rect> element with the rx and ry attributes:<\/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=\"350\" height=\"240\">\n      <rect x=\"70\" y=\"50\" rx=\"30\" ry=\"30\" width=\"170\" height=\"170\" style=\"fill:green;stroke:darkgray;stroke-width:5;opacity:0.7\" \/>\n      Sorry, inline SVG isn't supported by your browser..\n    <\/svg>\n  <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      Description of the <rect> element The SVG <rect> element creates a rectangle, as well as rectangle shape variations. It is possible to draw rectangles of various height, width, with different stroke and fill colors, etc. We are going to try some examples. Example of the SVG <rect> element: Now let\u2019s explain this code: The\u00a0width\u00a0and\u00a0height\u00a0attributes specify […]<\/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\/9293"}],"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=9293"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9293\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}