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