SVG Rectangle with Text
The <rect> element is used to create a Rectangle.
In an example below let’s create a rectangle by writing a code.
Example
<!DOCTYPE html> <html> <head> <title> SVG Rectangle </title> </head> <body> <svg width="400" height="110"> <rect width="300" height="100" style="fill:powderblue;stroke-width:3;stroke:black" /> </svg> </body> </html>
Attributes Used in the Code
- The width and height attributes of the
<rect>element specifies the width and height of the rectangle. - Attribute style specifies the CSS property for the rectangle.
- The CSS fill property is used to fill the rectangle with any color you want. (In an above example I have filled the rectangle with powderblue color.)
- The CSS stroke width property defines the border width of the rectangle.
- And the CSS stroke property defines the border color of the rectangle.
SVG Rectangle Rounded Corners
To draw a rectangle with rounded corners we copy the same code that we have write in an above example. But to make the corners rounded we will write some extra attributes.
Below in an example let’s write a code to create a rectangle with rounded corners.
Example
<!DOCTYPE html> <html> <head> <title>SVG Rectangle Rounded Corners</title> </head> <body> <svg width="400" height="200"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:green;stroke:black;stroke-width:5;" /> </svg> </body> </html>
The attributes rx and ry is used to round the corners of the rectangle.
SVG Rectangle With Text
Now let’s draw a rectangle with text. Here we will add two elements inside the SVG element, <rect> element and <text> element. The <text> element is used to draw rectangle with text.
In an example below, let’s write a code to draw rectangle with text.
Example
<!DOCTYPE html>
<html>
<head>
<title>SVG Rectangle with Text</title>
<body>
<svg height="300" width="300">
<rect x="20" y="20" width="300" height="100" fill="powderblue"/>
<text x="70" y="70" fill="blue" font-weight="bold">SVG Rectangle With Text</text>
</svg>
</body>
</html>
Inside the <text> element we have write x and y attributes. These attributes define the x and y coordinate of the text.
Related Posts
