请问任何人都可以解释SVG多边形点吗?

时间:2016-08-19 12:25:54

标签: html html5 svg

我需要知道SVG多边形点,它们是如何工作的。 任何人都可以给出明确的解释或其他链接,我可以得到明确的解释。

如果可能的话,解释这些多边形点如何在内部工作,我的意思是它使用的算法是什么?

 <svg height="210" 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>

更新 这个问题背后的主要意图是多边形如何获取点属性以及它如何在浏览器中呈现为多边形?

2 个答案:

答案 0 :(得分:19)

polygon会得到points(ref here)的列表,这些列表是每对的X和Y坐标。

在您的示例中,您有

points="100,10 40,198 190,78 10,78 160,198"

这是五个角落&#34;从(100,10)开始,从那里到(40,198),依此类推。最后一点连接第一个点以形成一个闭合的多边形。

文档告诉我们&#34;每个点由用户坐标系中的X和Y坐标定义。&#34; 单位是像素和&#34;初始视口坐标系(因此初始用户坐标系)的原点位于视口的顶部/左侧,正x轴指向右侧,正y-轴向下&#34; (来自here

所以,100,10是100像素,10是。

答案 1 :(得分:0)

该元素用于创建至少包含三个边的图形。 多边形由直线构成,形状是“封闭的”。 (所有线路连接起来)。 您可以看到一些示例here