一篇文章教會(huì)你使用SVG 畫(huà)線

作者：前端進(jìn)階者 2021-02-19 19:35:53

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)。

責(zé)任編輯：武曉燕來(lái)源：前端進(jìn)階學(xué)習(xí)交流

SVG 形狀元素