SVG <rect>
SVG 形状
SVG 包含一些预定义形状元素，开发者可使用这些元素。
- 矩形
<rect> - 圆形
<circle> - 椭圆形
<ellipse> - 线条
<line> - 折线
<polyline> - 多边形
<polygon> - 路径
<path>
接下来的章节将解释每个元素，从 <rect> 元素开始。
SVG 矩形 - <rect>
<rect> 元素用于创建矩形和矩形的变体形状。
<rect> 元素有六个基本属性，用于定位和塑造矩形。
| Attribute | 描述 |
|---|---|
| width | 必需。矩形的宽度。 |
| height | 必需。矩形的高度。 |
| x | 矩形左上角的 x 坐标。 |
| y | 矩形左上角的 y 坐标。 |
| rx | 矩形角的 x 坐标半径（用于圆角）。默认为 0。 |
| ry | 矩形角的 y 坐标半径（用于圆角）。默认为 0。 |
一个 SVG 矩形
此示例使用六个基本属性和填充颜色创建一个矩形。
这是 SVG 代码
示例
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>
自己动手试一试 »
代码解释
<rect>元素的width和height属性定义了矩形的高度和宽度。x和y属性定义了矩形左上角在 SVG 画布上的 x 和 y 坐标（x="10" 表示矩形距离左边距 10px，y="10" 表示矩形距离顶部边距 10px）。rx和ry属性定义了矩形角的半径。fill属性定义了矩形的填充颜色。
带边框的矩形
让我们来看另一个包含一些新属性的示例。
这是 SVG 代码
示例
<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>
自己动手试一试 »
代码解释
style属性用于定义矩形的 CSS 属性。- CSS
fill属性定义了矩形的填充颜色。 - CSS
stroke-width属性定义了矩形边框的宽度。 - CSS
stroke属性定义了矩形边框的颜色。
带透明度的矩形
让我们来看另一个包含一些新属性的示例。
这是 SVG 代码
示例
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
自己动手试一试 »
代码解释
- CSS
fill-opacity属性定义了填充颜色的透明度（有效范围：0 到 1）。 - CSS
stroke-opacity属性定义了描边颜色的透明度（有效范围：0 到 1）。
另一个带透明度的矩形
为整个元素定义透明度。
这是 SVG 代码
示例
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
自己动手试一试 »
代码解释
- CSS
opacity属性定义了整个元素的透明度值（有效范围：0 到 1）。
带圆角的矩形
最后一个示例，创建一个带圆角的矩形。
这是 SVG 代码
示例
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10" rx="20" ry="20"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
自己动手试一试 »
代码解释
rx和ry属性使矩形角圆化。
