SVG rect Element
Last Updated :
01 Jul, 2022
The SVG <rect> element is used to create a rectangle. We can customize the rectangle shapes:
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: x-axis co-ordinate of top left.
- Y: y-axis co-ordinate of top left.
- width: Width of rectangle.
- height: Height of rectangle.
- rx: Roundness of the x-axis.
- ry: Roundness of the y-axis.
- style: Specify the inline style.
- class: Specify the external style.
Example:
html
<!DOCTYPE html>
< html >
< body >
< svg width="400" height="100">
< rect width="400" height="100"
style="fill:rgb(0, 0, 255);
stroke-width:10;stroke:rgb(0, 0, 0)" />
</ svg >
</ body >
</ html >
|
Output:
Example: Change the corner of the rectangle.
html
<!DOCTYPE html>
< html >
< body >
< svg width="400" height="380">
< rect x="80" y="20" rx="20"
ry="20" width="150" height="150"
style="fill:orange;
stroke:black;
stroke-width:2;
opacity:0.5" />
</ svg >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...