SVG的<rect>元素表示矩形。使用这个元素，你可以画出带有不同边框（轮廓）和填充色、尖角或圆角等的各种宽度、高度的矩形。这个解释已经覆盖了SVGrect元素的所有特性。
如果你喜欢看rect教程的视频版，下面是保存在YouTube上的本教程的视频版：
一个矩形示例
下面是一个简单的<rect>示例：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100"
style="stroke:#006600; fill: #00cc00"/>
</svg>
矩形的位置由x和y属性确定。请记住，这个位置是相对于父元素的位置定位的。
矩形的大小由width和height确定。
style属性允许你设置额外的样式信息，如边框、填充色和边框的宽度等。这将在别的章节中作更详细地介绍。
下面是矩形图片的例图：
圆角
我们也可以在矩形上绘制圆角。rx和ry属性决定了圆角的弧度。rx属性决定圆角的宽度，ry属性决定圆角的高度。这里有三个矩形，rx和ry属性分别设置为5个单位、10个单位和15个单位。注意看圆角的不同大小。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="50" width="50"
rx="5" ry="5"
style="stroke:#006600; fill: #00cc00"/>
<rect x="70" y="10" height="50" width="50"
rx="10" ry="10"
style="stroke:#006600; fill: #00cc00"/>
<rect x="130" y="10" height="50" width="50"
rx="15" ry="15"
style="stroke:#006600; fill: #00cc00"/>
</svg>
矩形结果如下：
在这些例子中，每个矩形中的rx和ry被设置为了相同的值。如果你仅设置rx属性，ry属性将会和rx的值保持一致。这是一个定义均匀圆角矩形的快捷方式。
下面两个例子中，rx值都是10，但是ry值分别被设置为5和15。你将看到两个不同圆角高度和宽度的圆角矩形。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="50" width="50"
rx="10" ry="5"
style="stroke:#006600; fill: #00cc00"/>
<rect x="130" y="10" height="50" width="50"
rx="10" ry="15"
style="stroke:#006600; fill: #00cc00"/>
</svg>
矩形边框
你可以使用SVG stroke样式属性为矩形的边框（轮廓）添加样式。下面这个例子将矩形的边框颜色设置为深绿，边框宽度设置为3：
<rect x="20" y="20" width="100" height="100"
style="stroke: #009900;
stroke-width: 3;
fill: none;
"
/>
下面是rect元素在浏览器中渲染的样子：
你也可以使用stroke-dasharray样式属性将矩形的边框设置为虚线。示例代码如下：
<rect x="20" y="20" width="100" height="100"
style="stroke: #009900;
stroke-width: 3;
stroke-dasharray: 10 5;
fill: none;
"
/>
浏览器下渲染结果如下图：
矩形填充
你可以使用SVG fill样式属性为矩形提供填充色。比如，当你不需要为矩形提供填充色时，可以直接将fill样式属性设置为none，示例代码如下：
<rect x="20" y="20" width="100" height="100"
style="stroke: #009900;
fill: none;
"
/>
下面是没有填充的rect元素在浏览器中渲染的样子：
你也可以选择用颜色填充矩形，下面这个例子用一个亮绿色填充rect元素：
<rect x="20" y="20" width="100" height="100"
style="stroke: #009900;
fill: #33ff33;
"
/>
浏览器渲染结果如下：
你也可以使用fill-opacity样式属性使填充色变透明。下面这个例子是两个矩形，其中，一个半透明的矩形一部分在另一个矩形上面：
<rect x="20" y="20" width="100" height="100"
style="stroke: #009900;
fill: #33ff33;
"
/>
<rect x="50" y="50" width="100" height="100"
style="stroke: #000099;
fill: #3333ff;
fill-opacity: 0.5;
"
/>
浏览器渲染结果如下：
在这个例子中，第二个矩形的边框不是透明的，但是你可以使用stroke-opacity样式属性将其设置为透明。
