9.4 SVG 矩形（rect）

SVG 形状（Shapes）

就像画板应用一样，SVG为开发者提供了一些预定义的形状元素，以便于快速应用：

• 方形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线条 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

后续章节我们将逐个介绍这些图形元素，先从方形及其一些变体开始。 由于SVG代码可读性较高，我们就使用实例代码结合代码解释的方式来学习。

SVG 矩形

rect 标签用来创建矩形元素。

例子1 - 长方形（Rectangle）

代码如下（提示：实际结果可点击result标签，后面不再重复）：

代码解释如下：

• <rect> 元素的 width 和 height 属性定义了矩形的宽高
• style 属性用来定义矩形的样式
• fill 属性定义矩形的填充色
• stroke-width 属性定义矩形边界的宽度
• stroke 属性定义矩形边界的颜色

例子2 - 正方形（Square）

这个例子包含了一些新的属性，代码如下：

代码解释如下：

• x 属性定义矩形左边的位置（比如：x="50"表示从左边边缘移动50px）
• y 属性定义矩形上边的位置（比如：y="20"表示从顶部边缘移动20px）
• fill-opacity 属性定义填充色的透明度（合法范围为：0 到 1）
• stroke-opacity 属性定义笔触颜色的透明度（合法范围为：0 到 1）

例子3 - 定义整个元素的透明度

代码如下：

代码解释如下：

• opacity 属性定义整个元素的透明度（合法范围为：0 到 1）

例子4 - 圆角矩形

和正方形一样，圆角矩形也是矩形的一个变体。代码如下：

代码解释如下：

• rx 和 ry 属性可使矩形产生圆角。