矩形是最简单的基本形状，只需要指定其左上角的 x 和 y 坐标以及它的宽度（width）和高度（height）即可。矩形内部会使用 fill 属性代表的颜色进行填充，如果没有指定 fill 颜色，则会使用黑色填充，也可以指定为 none，即不填充矩形内部，保持透明。
属性
| 属性 | 说明 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| x | 定义矩形的左侧位置（例如，x = "0" 定义矩形到浏览器窗口左侧的距离是 0px） | ||||||||||||||
| y | 定义矩形的顶端位置（例如，y = "0" 定义矩形到浏览器窗口顶端的距离是 0px） | ||||||||||||||
| width | 定义矩形的宽度（例如，width = "10" 定义矩形的宽度是 10px） | ||||||||||||||
| height | 定义矩形的高度（例如，height = "30" 定义矩形的高度是 30px） | ||||||||||||||
| style | 定义矩形填充颜色、填充透明度、边框颜色、边框宽度及边框透明度等属性
|
示例
<svg width="300px" height="300px" viewBox="0 0 100 100">
<!-- 内部填充为黑色, 不绘制边框 -->
<rect x="10" y="10" width="30" height="50"/>
<!-- 内部不填充颜色, 绘制黑色边框 -->
<rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;"/>
<!-- 内部填充为蓝色, 绘制较粗的、半透明红色边框 -->
<rect x="10" y="70" width="25" height="30"
style="fill: #0000ff;
stroke: red; stroke-width: 7; stroke-opacity: 0.5;"/>
<!-- 内部填充为半透明的黄色，用虚线绘制绿色边框 -->
<rect x="50" y="70" width="35" height="20"
style="fill: yellow; fill-opacity: 0.5;
stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>
</svg>
效果如下：
圆角矩形
如果希望得到一个圆角矩形，可以分别指定 x 方向和 y 方向的圆角半径。rx（x-radius，x 方向的圆角半径）的最大值是矩形宽度的一半，同理，ry（y-radius，y 方向的圆角半径）的最大值是矩形高度的一半。如果指定了 rx 和 ry 中的一个值，则认为它们相等。
具体示例如下：
<svg width="300px" height="300px" viewBox="0 0 200 200">
<!-- rx 和 ry 相等, 逐渐增大 -->
<rect x="10" y="10" width="20" height="40" rx="2" ry="2"
style="stroke: black; fill: none;"/>
<rect x="40" y="10" width="20" height="40" rx="5"
style="stroke: black; fill: none;"/>
<rect x="70" y="10" width="20" height="40" ry="10"
style="stroke: black; fill: none;"/>
<!-- rx 和 ry 不相等 -->
<rect x="10" y="60" width="20" height="40" rx="10" ry="5"
style="stroke: black; fill: none;"/>
<rect x="40" y="60" width="20" height="40" rx="5" ry="10"
style="stroke: black; fill: none;"/>
</svg>
效果如下：
矩形旋转
SVG 的旋转操作，使用 <animateTransform> 标签，设置 attributeName 为 transform，然后用 type 属性的值指定变换的哪个值（translate、scale、rotate、skewX 或 skewY 之一），旋转对应 rotate 值。from 和 to 的值指定为适当的要动画绘制的变换。
具体示例如下：
<?xml version="1.0"?>
<svg width="500" height="250">
<rect x="50" y="50" width="50" height="50" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0 75 75" to="360 75 75" dur="2" repeatCount="indefinite" />
</rect>
</svg>
效果如下：
