SVG Rectangle
SVG Rectangle （SVG矩形）
Description of the <rect> element
Description of the <rect> element
The SVG <rect> element creates a rectangle, as well as rectangle shape variations. It is possible to draw rectangles of various height, width, with different stroke and fill colors, etc. We are going to try some examples.
Example of the SVG <rect> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="350" height="120">
<rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
</svg>
</body>
</html>
Now let’s explain this code: （现在，让我们解释一下此代码：）
The width and height attributes specify the height and the width of the rectangle. （- width和height属性指定矩形的高度和宽度。）
The style attribute specifies some CSS properties for the rectangle. （- style属性指定矩形的一些CSS属性。）
The CSS fill property specifies the fill color of the rectangle. （- CSS填充属性指定矩形的填充颜色。）
The CSS stroke-width property is used to specify the width of the rectangle’s border. （- CSS stroke-width属性用于指定矩形边框的宽度。）
The CSS stroke property specifies the color of the rectangle’s border. （- CSS描边属性指定矩形边框颜色。）
Example of the SVG <rect> element with the x and y attributes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250">
<rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
Sorry, inline SVG isn't supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Let’s explain the code above: （我们来解释一下上面的代码：）
The x attribute specifies the left position of the rectangle. （- x属性指定矩形的左侧位置。）
The y attribute specifies the top position of the rectangle. （- y属性指定矩形的顶部位置。）
The CSS fill-opacity property specifies the opacity of the fill color. （- CSS填充透明度属性指定填充颜色的不透明度。）
The CSS stroke-opacity property specifies the opacity of the stroke color. （- CSS描边不透明度属性指定描边颜色的不透明度。）
Example of the SVG <rect> element with the CSS opacity property:
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
Sorry, inline SVG is not supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Example of the SVG <rect> element with the rx and ry attributes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="350" height="240">
<rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
Sorry, inline SVG isn't supported by your browser..
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>