原文： http://tutorials.jenkov.com/svg/polygon-element.html

Polyline

虽然说这个元素我没用过，但是还是蛮强大的，也翻译下

示例

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

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

    <polyline points="0,0  30,0  15,30"

        style="stroke:#006600;"/>

</svg>

效果如下

折线是通过定义很多点来定义的，在points 属性中每个点  都是x,y 这样的形式，这个例子有3个点

折线是通过链接这三个点，然后填充，默认的填充颜色是黑色

看看另外的填充效果

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

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

    <polyline points="10,2  60,2  35,52"

        style="stroke:#006600; stroke-width: 2;

               fill: #33cc33;"/>

</svg>

效果

通过对比我们发现边框的怎么少了一个边？

因为只有两个点之间才会被链接！要绘制闭合的三角形

代码如下

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

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

    <polyline points="10,2  60,2  35,52  10,2"

        style="stroke:#006600; fill: #33cc33;"/>

</svg>

把最后一个点设为和起点一样，就可以看到闭合的三角形了

Polygon

首先看一个多边形示例

<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>

效果如下

通过观察代码和效果发现，在points里面只有3个点，但是效果图里面3边都绘制了。

因为polygon 元素在连线的时候，会把所有的点连接起来，包括第一个点和最后一个点。

polyline 元素是不连接最后一个点和第一个点的。

这好像是polygon和polyline最大的区别

来个更夸张的示意图 8变形

<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>

巴特西

[svg 翻译教程]Polyline（折线）polygon（多边形）

Polyline

Polygon

最新文章

热门文章