SVG基礎|繪制SVG直線、折線和多邊形

來源：懂視網責編：小采時間：2020-11-27 15:16:51

SVG基礎|繪制SVG直線、折線和多邊形

SVG基礎|繪制SVG直線、折線和多邊形:SVG基礎|繪制SVG直線、折線和多邊形 SVG直線SVG <line>元素用于繪制一條。下面是一個繪制直線的例子。<svg xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="10&qu

推薦度：

點擊下載本文 文檔為doc格式

導讀SVG基礎|繪制SVG直線、折線和多邊形:SVG基礎|繪制SVG直線、折線和多邊形 SVG直線SVG <line>元素用于繪制一條。下面是一個繪制直線的例子。<svg xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="10&qu

SVG基礎|繪制SVG直線、折線和多邊形

SVG直線

SVG <line>元素用于繪制一條。下面是一個繪制直線的例子。

<svg xmlns="http://www.w3.org/2000/svg">
 <line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/>
 <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
 <line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"/>
 <line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"/>
</svg>

上面代碼的返回結果如下：

x1和y1屬性用于指定直線的起點，x2和y2屬性用于指定直線的終點。可以使用style屬性來為直線設置顏色和描邊寬度。

SVG折線

<polyline>元素用于繪制SVG折線。所謂折線就是多條銜接的直線。看下面的例子：

<svg xmlns="http://www.w3.org/2000/svg">
 <polyline points="0,0 30,0 15,30"
 style="stroke:#006600;"/>
</svg>

上面代碼的返回結果如下：

折線由多個點來定義。每一個點都有x和y屬性。上面的例子中有三個點，它們組成了一個三角形。這3個點被直線連接，并被填充。默認的填充顏色是黑色。下面的例子中使用其它顏色來進行填充。

<svg xmlns="http://www.w3.org/2000/svg"> 
 <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">
 <polyline points="10,2 60,2 35,52 10,2"
 style="stroke:#006600; fill: #33cc33;"/>
</svg>

和SVG直線一樣，可以使用style屬性來為折線設置顏色和描邊寬度。

SVG多邊形

<polygon>元素用于繪制SVG多邊形。多邊形是指三條或三條邊以上的幾何圖形。看下面的SVG三角形的例子：

<svg xmlns="http://www.w3.org/2000/svg">
 <polygon points="10,0 60,0 35,50"
 style="stroke:#660000; fill:#cc3333;"/> 
</svg>

使用<polygon>元素，雖然只有三個點，但是你會發現三條邊都會被繪制出來。這是因為<polygon>元素會繪制各個點之間的所有直線，包括最后一個點指向第一個點的直線。這是<polygon>元素和code><polyline>元素的唯一不同之處。

我們可以繪制更多條邊的幾何圖形，下面是一個八邊形的例子：

<svg xmlns="http://www.w3.org/2000/svg">
 <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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

SVG基礎|繪制SVG直線、折線和多邊形

推薦度：

點擊下載本文 文檔為doc格式

標簽：入門直線線條

熱門焦點

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

SVG基礎|繪制SVG直線、折線和多邊形

SVG基礎|繪制SVG直線、折線和多邊形

SVG基礎|繪制SVG直線、折線和多邊形

最新推薦

猜你喜歡

熱門推薦