SVG <rect>

SVG (Scalable Vector Graphics)<rect>The element is used to draw rectangles, and is one of the common basic shapes in SVG. It allows you to draw rectangles, and control the rectangle's position, size, rounded corners, and other styles by setting attributes.

Basic Syntax

<rect
  x="x-coordinate"        <!-- 矩形左上角的 x 坐标 -->
  y="y-coordinate"        <!-- 矩形左上角的 y 坐标 -->
  width="width-value"     <!-- 矩形的宽度 -->
  height="height-value"   <!-- 矩形的高度 -->
  rx="rx-value"           <!-- 矩形的圆角半径（水平方向） -->
  ry="ry-value"           <!-- 矩形的圆角半径（垂直方向） -->
  fill="fill-color"       <!-- 矩形的填充颜色 -->
  stroke="stroke-color"   <!-- 矩形的描边颜色 -->
  stroke-width="width-value" <!-- 矩形的描边宽度 -->
/>

Attribute breakdown:

• xandyThe attributes specify the coordinates of the upper-left corner of the rectangle, i.e., the starting point of the rectangle.

• widthandheightThe attributes define the width and height of the rectangle.

• rxandryThe attributes are used to specify the rounded corner radius of the rectangle. If only settingrxthen the rounded corner radius of all corners is the same; if setting both at the same timerxandryyou can specify the horizontal and vertical rounded corner radii respectively.

• fillThe attribute defines the fill color of the rectangle.

• strokeThe attribute defines the stroke color of the rectangle.

• stroke-widthThe attribute defines the stroke width of the rectangle.

The following code draws a rectangle with blue fill, black stroke, and a stroke width of 2 pixels. The upper-left corner coordinate is (50, 50), width is 100, and height is 80.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

Example 1

Below is the SVG code:

Click to view:View SVG file。

Code analysis:

• The width and height attributes of the rect element define the height and width of the rectangle.
• The style attribute is used to define CSS properties.
• CSS's fill attribute defines the fill color of the rectangle (rgb value, color name, or hexadecimal value).
• CSS's stroke-width attribute defines the width of the rectangle border.
• CSS's stroke attribute defines the color of the rectangle border.

Example 2

Let's look at another example that contains some new attributes:

Click to view:View SVG file。

Code analysis:

• The x attribute defines the left position of the rectangle (for example, x="0" defines the distance from the rectangle to the left edge of the browser window as 0px).
• The y attribute defines the top position of the rectangle (for example, y="0" defines the distance from the rectangle to the top edge of the browser window as 0px).
• CSS's fill-opacity attribute defines the transparency of the fill color (valid range: 0 - 1).
• CSS's stroke-opacity attribute defines the transparency of the outline color (valid range: 0 - 1).

Example 3

Define the opacity of the entire element:

Below is the SVG code:

For Opera users:View SVG file。

• The CSS opacity attribute is used to define the transparency value of the element (range: 0 to 1).

Example 4

The last example creates a rounded rectangle:

Below is the SVG code:

For Opera users:View SVG file。

• The rx and ry attributes can create rounded corners for the rectangle.