Vachmi
The <rect>
element is a basic SVG shape to draw rectangles of various widths, heights, colours and at desired location.
Here is the SVG code to draw this rectangle.
<rect x="20" y="20" width="150" height="100" style="fill:rgb(100,100,255);" />
</svg>
• The position of the rectangle is determined by x and y attributes. These represent the top left corner of the rectangle.
• This position of rectangle is relative to the position of its parent element.
• The x attribute defines the left position of the rectangle. e.g. x="20" places the rectangle 20px from the left margin.
• The y attribute defines the top position of the rectangle. e.g. y="20" places the rectangle 20px from the top margin.
• The CSS fill property defines the fill color of the rectangle
x - The x coordinate of the rectangle
It can accept a length or a percentage as its value. Default Value: 0
y - The y coordinate of the rectangle
It can accept a length or a percentage as its value. Default Value: 0
width - The width of the rectangle
It can accept a length or a percentage as its value.
height - The height of the rectangle
It can accept a length or a percentage as its value.
rx - The horizontal corner radius of the rectangle
It is used to round the corner of a rectangle.
Defaults to ry if it is specified.
ry - The vertical corner radius of the rectangle
It is used to round the corner of a rectangle.
Defaults to rx if it is specified.
<rect x="20" y="20" width="120" height="60" rx="20" ry="20" style="fill:none; stroke:black" />
</svg>