YouTip

Here's the translated English HTML content with all code blocks preserved:

SVG <rect>

The SVG (Scalable Vector Graphics) <rect> element is used to draw rectangles. It is one of the basic shapes commonly used in SVG, allowing you to draw rectangles and control their position, size, rounded corners, and other styles through attribute settings.

Basic Syntax

<rect x="x-coordinate" <!-- x-coordinate of the rectangle's top-left corner -->
      y="y-coordinate" <!-- y-coordinate of the rectangle's top-left corner -->
      width="width-value" <!-- width of the rectangle -->
      height="height-value" <!-- height of the rectangle -->
      rx="rx-value" <!-- corner radius of the rectangle (horizontal) -->
      ry="ry-value" <!-- corner radius of the rectangle (vertical) -->
      fill="fill-color" <!-- fill color of the rectangle -->
      stroke="stroke-color" <!-- stroke color of the rectangle -->
      stroke-width="width-value" <!-- stroke width of the rectangle --> />

Attribute Explanation:

• The x and y attributes specify the coordinates of the rectangle's top-left corner, i.e., its starting point.
• The width and height attributes define the width and height of the rectangle.
• The rx and ry attributes are used to specify the corner radius of the rectangle. If only rx is set, all corners will have the same radius. If both rx and ry are set, you can specify different radii for horizontal and vertical directions.
• The fill attribute defines the fill color of the rectangle.
• The stroke attribute defines the stroke color of the rectangle.
• The stroke-width attribute defines the stroke width of the rectangle.

The following code draws a rectangle with blue fill, black stroke, and 2-pixel stroke width. Its top-left corner is at (50, 50), with a width of 100 and height of 80.

---

Example 1

Below is the SVG code:

Example

Try it »

Click to view: View SVG file.

Code Explanation:

• 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.
• The CSS fill property defines the fill color of the rectangle (RGB value, color name, or hexadecimal value).
• The CSS stroke-width property defines the border width of the rectangle.
• The CSS stroke property defines the border color of the rectangle.

Example 2

Let's look at another example with some new attributes:

Example

Try it »

Click to view: View SVG file.

Code Explanation:

• The x attribute defines the left position of the rectangle (e.g., x="0" means the rectangle is 0px from the left edge of the browser window).
• The y attribute defines the top position of the rectangle (e.g., y="0" means the rectangle is 0px from the top edge of the browser window).
• The CSS fill-opacity property defines the transparency of the fill color (valid range: 0 to 1).
• The CSS stroke-opacity property defines the transparency of the stroke color (valid range: 0 to 1).

Example 3

Defining the opacity of the entire element:

Below is the SVG code:

Example

Try it »

For Opera users: View SVG file.

• The CSS opacity property defines the transparency value of the element (range: 0 to 1).

---

Example 4

Finally, an example creating a rounded rectangle:

Below is the SVG code:

Example

Try it »

For Opera users: View SVG file.

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