如何定义HTML5 SVG多边形点以创建图形

Question

嗨，我想找出如何在HTML5中定义多边形的点。

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

这将创建一个星形图像。我尝试删除一些点并添加一些任意的点，但没有创建任何图像。我也尝试使用三个点，但没有成功。

- Avinash Solanki

---

使用此生成器：http://cssplant.com/clip-path-generatorTriangle: <svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> </svg> - odedta

你好，感谢回复。请问您能解释一下 points="200,10 250,190 160,210" 的含义吗？200是起始点吗？"10 250" 是什么意思？250代表厚度吗？ - Avinash Solanki

说实话，我从未尝试过创建SVG多边形，但我在规范文档中找到了解释，您可以在这里阅读：http://www.w3.org/TR/SVG/shapes.html#PolygonElement - odedta

Answer 1

这些数值是成对出现的，每对代表多边形顶点的(x, y)坐标。

200, 10表示该点相对于原点在x轴方向（右侧）有200个单位距离，在y轴方向（下方）有10个单位距离。

- Robert Longson