polyline元素是SVG的一個基本形狀，用來創(chuàng)建一系列直線連接多個點(diǎn)。典型的一個polyline是用來創(chuàng)建一個開放的形狀，最后一點(diǎn)不與第一點(diǎn)相連
折線示例代碼如下:
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20"/> </svg>測試看看 ?/?
運(yùn)行后效果如下:
示例代碼如下:
<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>測試看看 ?/?
運(yùn)行后效果預(yù)覽圖:
多條線由點(diǎn)標(biāo)識。每個點(diǎn)在points屬性中均以x，y列出。此示例有3個點(diǎn)，它們定義了一個三角形。
將3個點(diǎn)用線連接起來，然后填充。默認(rèn)的填充顏色是黑色。
示例代碼如下:
<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>測試看看 ?/?
運(yùn)行后效果預(yù)覽圖:
您可能已經(jīng)注意到，三角形中只有兩條線是用描邊顏色（深綠色）繪制的。原因是，僅繪制了列出的點(diǎn)之間的線。沒有畫回第一點(diǎn)的線。為此，points再次將第一個點(diǎn)添加到屬性中，如下所示:
<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>測試看看 ?/?
該style屬性設(shè)置筆劃（線條）的顏色和粗細(xì)以及填充顏色。