一篇文章教會(huì)你使用SVG 畫(huà)線
SVG <line>元素是一個(gè)SVG基本形狀,用來(lái)創(chuàng)建一條連接兩個(gè)點(diǎn)的線。<line>元素用于在SVG圖像內(nèi)部繪制線條。可以繪制水平直線,垂直豎線直線、斜角直線等。
polyline元素是SVG的一個(gè)基本形狀,用來(lái)創(chuàng)建一系列直線連接多個(gè)點(diǎn)。典型的一個(gè)polyline是用來(lái)創(chuàng)建一個(gè)開(kāi)放的形狀,最后一點(diǎn)不與第一點(diǎn)相連。
一、SVG 畫(huà)直線
案例
一些簡(jiǎn)單的常用SVG <line>畫(huà)直線。
示例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <title>項(xiàng)目</title>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"></line>
- <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line>
- <line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"></line>
- <line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"></line>
- </svg>
- </body>
- </html>
運(yùn)行后直線效果如下 :
代碼解析 :
直線起始點(diǎn)由x1和y1屬性設(shè)置的點(diǎn)處,直線終點(diǎn)由x2和y2屬性設(shè)置的點(diǎn)處,該style屬性設(shè)置筆劃(線條)的顏色和粗細(xì)。
二、SVG 畫(huà)曲折線
1. 折線
折線示例代碼如下:
示例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <title>項(xiàng)目</title>
- <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>
- </body>
- </html>
運(yùn)行后效果如下:
2. 繪制三角形
示例代碼如下:
示例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <title>項(xiàng)目</title>
- <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>
- </body>
- </html>
運(yùn)行后效果預(yù)覽圖:
多條線由點(diǎn)標(biāo)識(shí)。
每個(gè)點(diǎn)在points屬性中均以x,y列出。此示例有3個(gè)點(diǎn),它們定義了一個(gè)三角形。將3個(gè)點(diǎn)用線連接起來(lái),然后填充。默認(rèn)的填充顏色是黑色。
3. 繪制一個(gè)填充綠色的三角形
示例代碼如下:
示例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <title>項(xiàng)目</title>
- <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>
- </body>
- </html>
運(yùn)行后效果預(yù)覽圖:
已經(jīng)注意到,三角形中只有兩條線是用描邊顏色(深綠色)繪制的。原因是,僅繪制了列出的點(diǎn)之間的線。沒(méi)有畫(huà)回第一點(diǎn)的線。為此,points再次將第一個(gè)點(diǎn)添加到屬性中。
如下所示:
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <title>項(xiàng)目</title>
- <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>
- </body>
- </html>
運(yùn)行的圖像結(jié)果如下:
該style屬性設(shè)置筆劃(線條)的顏色和粗細(xì)以及填充顏色。
三、總結(jié)
本文基于Html基礎(chǔ),使用SVG畫(huà)不一樣的線,畫(huà)出不一樣圖形。SVG <line>元素畫(huà)直線,polyline元素創(chuàng)建一個(gè)開(kāi)放的形狀,最后一點(diǎn)不與第一點(diǎn)相連。實(shí)現(xiàn)畫(huà)曲線的效果,以及在實(shí)際開(kāi)發(fā)項(xiàng)目中需要注意的點(diǎn),遇到的一些難點(diǎn), 都提供了一些有效的解決方案。
歡迎大家積極嘗試,有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單,但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候,總會(huì)有各種各樣的問(wèn)題,切勿眼高手低,勤動(dòng)手,才可以理解的更加深刻。
代碼很簡(jiǎn)單,希望能夠幫助讀者更好的去學(xué)習(xí)SVG。
本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」,可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。
























