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