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

原文： 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>