Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to draw a rectangle in HTML5 SVG?
SVG is a markup language based on XML that is used to describe two-dimensional vector graphics. SVG is essentially what HTML is to text when it comes to visuals.
A rectangle is drawn on the screen via the <rect> element. The placement and shape of the rectangles on the screen are determined by six fundamental properties.
Syntax
<rect x="x-axis co-ordinate" y="y-axis co-ordinate" width="length" height="length" rx="length" ry="length" style="style information" class="style class" > </rect>
Attributes
X − The top-left x-axis coordinate.
Y − The top-left y-axis coordinate.
width − The rectangle's width.
height − The rectangle's height.
rx − The x-axis' roundness.
ry − The y-axis' roundness.
style − Indicate an inline style.
Describe the external style for the class.
Example 1
Using the “svg <rect>”
In the following example we are using svg <rect> to draw a rectangle.
<!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0, 255, 255); stroke-width:6;stroke:rgb(255, 0, 0)" /> </svg> </body> </html>
On executing the above script, it will generate an output consisting of a rectangle filled with hexa drawn on the webpage.
Example 2
Adding x and y attributes
In the following example we are using svg <rect> element with the x and y attributes.
<!DOCTYPE html> <html> <body> <svg width="400" height="800"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.4; stroke-opacity:0.9"/> </svg> </body> </html>
When the script gets executed, it will generate the output consisting of a rectangle filled with blue drawn along with width and height.
Example 3
Adding CSS opacity Property
In the following example we are using svg <rect> element with css opacity.
<!DOCTYPE html> <html> <body> <svg width="450" height="250"> <rect x="55" y="25" width="155" height="160" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
On executing the above script, it will generate an output consisting of a rectangle drawn with opacity filled with blue on the webpage.
Example 4
To draw a rectangle in HTML5 SVG.
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>SVG</title> </head> <body> <h2>HTML5 SVG Rectangle</h2> <svg id="svgelem" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="200" height="100" fill="green"/> </svg> </body> </html>
When the script gets executed, the output window pops up, displaying the rectangle filled with green drawn on the webpage.
2K+ Views
