SVG <rect>

SVG 形状

SVG 有一些预定义的形状元素可供开发者使用：

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

接下来的章节将从 rect 元素开始讲解每个元素。

SVG 矩形 - <rect>

例子 1

<rect> 元素用于创建矩形以及矩形形状的变体：

Sorry, your browser does not support inline SVG.

这是 SVG 代码：

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

亲自试一试

代码解释：

  • <rect> 元素的 width 和 height 属性定义矩形的高度和宽度
  • style 属性用于定义矩形的 CSS 属性
  • CSS fill 属性定义矩形的填充颜色
  • CSS border-width 属性定义矩形的边框宽度
  • CSS stroke 属性定义矩形的边框颜色

例子 2

让我们看另一个包含新属性的例子：

这是 SVG 代码：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

亲自试一试

代码解释：

  • x 属性定义矩形的左侧位置（例如 x="50" 将矩形放置在距左外边距 50 px 的位置）
  • y 属性定义矩形的顶部位置（例如 y="20" 将矩形放置在距上外边距 20 px 的位置）
  • CSS fill-opacity 属性定义填充颜色的不透明度（合法范围：0 到 1）
  • CSS border-opacity 属性定义笔触颜色的不透明度（合法范围：0 到 1）

例子 3

定义整个元素的不透明度：

这是 SVG 代码：

<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" />
</svg>

亲自试一试

代码解释：

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

例子 4

最后一个例子，创建带圆角的矩形：

这是 SVG 代码：

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

亲自试一试

代码解释：

  • rx 和 ry 属性使矩形的角变圆