一篇文章教會(huì)你使用SVG 畫線
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
SVG
polyline元素是SVG的一個(gè)基本形狀，用來創(chuàng)建一系列直線連接多個(gè)點(diǎn)。典型的一個(gè)polyline是用來創(chuàng)建一個(gè)開放的形狀，最后一點(diǎn)不與第一點(diǎn)相連。
一、SVG ?畫直線
案例
一些簡(jiǎn)單的常用SVG
示例
<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 ?畫曲折線
1. 折線
折線示例代碼如下:
示例
<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. 繪制三角形
示例代碼如下:
示例
<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)用線連接起來，然后填充。默認(rèn)的填充顏色是黑色。
3. 繪制一個(gè)填充綠色的三角形
示例代碼如下:
示例
<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)之間的線。沒有畫回第一點(diǎn)的線。為此，points再次將第一個(gè)點(diǎn)添加到屬性中。
如下所示:
<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畫不一樣的線，畫出不一樣圖形。SVG
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望能夠幫助讀者更好的去學(xué)習(xí)SVG。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行