SVG - 矩形
<rect> 元素用于绘制与当前用户坐标系轴对齐的矩形。
声明
以下是 <rect> 元素的语法声明。我们只展示了主要属性。
<rect
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
rx="length"
ry="length"
style="style information"
class="style class" >
</rect>
属性
| 名称 | 描述 |
|---|---|
| x | 矩形左上角的 x 轴坐标。默认值为 0。 |
| y | 矩形左上角的 y 轴坐标。默认值为 0。 |
| width | 矩形的宽度。 |
| height | 矩形的高度。 |
| rx | 用于圆角矩形的角。 |
| ry | 用于圆角矩形的角。 |
| style | 用于指定内联样式。 |
| class | 用于为元素指定外部样式名称。 |
例
testSVG.htm
<html>
<title>SVG Rectangle</title>
<body>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >
Rectangle #1: Without opacity.</text>
<rect x="100" y="30" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</g>
</svg>
</body>
</html>输出
在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。
具有不透明度的矩形
<html>
<title>SVG Rectangle</title>
<body>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >
矩形#2：不透明度 </text>
<rect x="100" y="30" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);
stroke-opacity:0.5;opacity:0.5"> </rect>
</g>
</svg>
</body>
</html>
输出
在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。
带圆角的矩形
<html>
<title>SVG Rectangle</title>
<body>
<h1>Sample SVG Rectangle Image</h1>
<svg width="570" height="200">
<g>
<text x="0" y="15" fill="black" >
Rectangle #3: With Rounded Corner </text>
<rect x="100" y="100" rx="10" ry="10" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);"></rect>
</g>
</svg>
</body>
</html>
输出
在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。