Skip to content

Latest commit

 

History

History
56 lines (36 loc) · 1.75 KB

14.SVG-polygon元素.md

File metadata and controls

56 lines (36 loc) · 1.75 KB

SVG polygon元素

SVG<polygon>元素是用来绘制多边形（>=3）。

SVG Polygon教程视频版

下面是本篇教程的视频版：

<iframe width="560" height="315" src="//www.youtube.com/embed/OLUMeqSXPZY?list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO" frameborder="0" allowfullscreen=""></iframe>

SVG Polygon示例

这有一个简单的SVG多边形示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <polygon points="10,0  60,0  35,50"
         style="stroke:#660000; fill:#cc3333;"/>

</svg>

渲染结果：

<polygon points="10,2  60,2  35,52" style="stroke:#660000; fill:#cc3333;"></polygon>

你可能会注意到，即使只列出了三个点，也绘制出了三条边。这是因为<polygon>元素绘制出了点之间的所有的直线，包括最后一个点到第一个点之间的直线。然而，<polyline>元素不会绘制最后一个点到第一个点之间的线。这也是<polygon>和<polyline>元素之间唯一的不同点。

下面是一个更大的例子——八边形（八角形？）:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <polygon points="50,5   100,5  125,30  125,80 100,105
                   50,105  25,80  25, 30"
          style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>

</svg>
<polygon points="50,05   100,5  125,30  125,80 100,105
                 50,105  25,80  25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;"></polygon>