SVG - 矩形_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 图像渲染。

<< SVG - 拖动示例 SVG - 圆形 >>