SVG <polyline> 畫曲折線

polyline元素是SVG的一個基本形狀,用來創(chuàng)建一系列直線連接多個點。典型的一個polyline是用來創(chuàng)建一個開放的形狀,最后一點不與第一點相連

折線在線示例

折線示例代碼如下:

<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>
測試看看 ?/?

運行后效果如下:

繪制三角形

示例代碼如下:

<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ù)覽圖:

多條線由點標(biāo)識。每個點在points屬性中均以x,y列出。此示例有3個點,它們定義了一個三角形。
將3個點用線連接起來,然后填充。默認(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ù)覽圖:

您可能已經(jīng)注意到,三角形中只有兩條線是用描邊顏色(深綠色)繪制的。原因是,僅繪制了列出的點之間的線。沒有畫回第一點的線。為此,points再次將第一個點添加到屬性中,如下所示:

<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ì)以及填充顏色。

丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清