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 属性可使矩形产生圆角。