SVG <rect>

SVG 形状

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

• 长方形<rect>
• 圆圈<circle>
• 椭圆<ellipse>
• 线<line>
• 折线<polyline>
• 多边形<polygon>
• 小路<path>

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

SVG 矩形 -<rect>

示例 1

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

以下是 SVG 代码：

代码解释：

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

示例 2

让我们看一下另一个包含一些新属性的示例：

以下是 SVG 代码：

代码解释：

• x 属性定义矩形的左侧位置（例如 x="50" 将矩形置于距离左边距 50 像素的位置）
• y 属性定义矩形的顶部位置（例如 y="20" 将矩形置于距上边缘 20 像素的位置）
• CSS fill-opacity 属性定义填充颜色的不透明度（合法范围：0 到 1）
• CSS stroke-opacity 属性定义描边颜色的不透明度（合法范围：0 到 1）

示例 3

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

以下是 SVG 代码：

代码解释：

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

示例 4

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

以下是 SVG 代码：

代码解释：

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