目录

SVG <矩形>

❮ 上一节下一节 ❯

SVG 形状

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

矩形<矩形>
圆圈<圆圈>
椭圆<椭圆>
线路<线路>
折线<折线>
多边形<多边形>
路径<路径>

以下章节将从 rect 元素开始解释每个元素。

SVG 矩形 - <矩形>

示例1

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

这是 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 描边属性定义矩形边框的颜色

示例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 属性使矩形的角变圆

❮ 上一节下一节 ❯