更多示例
以下示例创建一个具有四个边的多边形:
下面是 SVG 代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到菜鸟教程</title>
</head>
<body>
<h1>SVG 多边形</h1>
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
</body>
</html>
尝试一下
使用 <polygon> 元素创建一个星星:
下面是 SVG 代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到菜鸟教程</title>
</head>
<body>
<h1>SVG 多边形</h1>
<svg height="250" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
</body>
</html>
尝试一下
将 fill-rule 属性更改为 “evenodd”:
下面是 SVG 代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到菜鸟教程</title>
</head>
<body>
<h1>SVG 多边形</h1>
<svg height="250" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
尝试一下