SVG <rect>
SVG 形状
SVG 有些预定义的形状元素可供开发者使用
- 矩形
<rect> - 圆形
<circle> - 椭圆形
<ellipse> - 线
<line> - 折线
<polyline> - 多边形
<polygon> - 路径
<path>
接下来的章节将解释每个元素，从 <rect> 元素开始。
SVG 矩形 - <rect>
使用 <rect> 元素可以创建矩形和矩形形状的变体。
使用 <rect> 元素可以创建矩形和矩形形状的变体。
| 属性 | 描述 |
|---|---|
| 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>
自己尝试 »
代码解释
- The
width和height属性定义了<rect>元素的高度和宽度 - The
x和y属性定义了矩形左上角的 x 和 y 坐标位置（x="10" 将矩形放置在距离左侧边距 10 像素的位置，而 y="10" 将矩形放置在距离顶部边距 10 像素的位置）在 SVG 画布中 - The
rx和ry属性定义了矩形角的半径 - The
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>
自己尝试 »
代码解释
- The
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>
自己尝试 »
代码解释
- The
rx和ry属性使矩形的角变圆
