SVG - 多边形_SVG 菜鸟教程

<polygon> 元素用于绘制由连接的直线组成的闭合形状。

语法声明

以下是 <polygon> 元素的语法声明。我们只展示了主要属性。

<polygon
	 	points="list of points" 	>	
</polygon>

属性

名称	描述
points	构成多边形的点列表。

例

testSVG.htm

<html>
	 	<title>SVG Polygon</title>
	 	<body>
	 	 		
	 	 	 <h1>Sample SVG Polygon Image</h1>
	 	 		
	 	 	 <svg width="600" height="350">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="0" y="15" fill="black" >多边形#1：无不透明度。</text>
	 	 	 	 	 		
	 	 	 	 	 	 <polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
	 	 	 	 	 	 stroke="black" stroke-width="3" fill="rgb(121,0,121)"></polygon>
	 	 	 	 	</g>	
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

具有不透明度的多边形

<html>
	 	<title>SVG Polygon</title>
	 	<body>
	 	 	 <h1>Sample SVG Polygon Image</h1>
	 	 		
	 	 	 <svg width="600" height="350">	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="0" y="15" fill="black" >多边形#2：不透明度 </text>
	 	 	 	 	
	 	 	 	 	 	 <polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
	 	 	 	 	 	 style="fill:rgb(121,0,121);stroke-width:3;
	 	 	 	 	 	 stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5"></polygon>
	 	 	 	 	</g>
	 	 	 </svg>
	 	 		
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

<< SVG - 线条 SVG - 多段线 >>