日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
一篇文章教會(huì)你使用SVG 畫(huà)線

SVG 元素是一個(gè)SVG基本形狀，用來(lái)創(chuàng)建一條連接兩個(gè)點(diǎn)的線。元素用于在SVG圖像內(nèi)部繪制線條?？梢岳L制水平直線，垂直豎線直線、斜角直線等。

創(chuàng)新互聯(lián)公司從2013年開(kāi)始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元武夷山做網(wǎng)站,已為上家服務(wù),為武夷山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

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 畫(huà)直線。

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     項(xiàng)目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.        
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.        
    9.   
  
  
  
  9.        
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.    
    12.   
  
  
  
  12.  
    13.

運(yùn)行后直線效果如下 :

代碼解析 ：

直線起始點(diǎn)由x1和y1屬性設(shè)置的點(diǎn)處，直線終點(diǎn)由x2和y2屬性設(shè)置的點(diǎn)處，該style屬性設(shè)置筆劃（線條）的顏色和粗細(xì)。

二、SVG  畫(huà)曲折線

1. 折線

折線示例代碼如下:

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     項(xiàng)目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.        
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.    
    10.   
  
  
  
  10.  
    11.

運(yùn)行后效果如下:

2. 繪制三角形

示例代碼如下:

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     項(xiàng)目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.    
    10.   
  
  
  
  10.  
    11.

運(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è)填充綠色的三角形

示例代碼如下:

示例

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     項(xiàng)目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.         
  
  
  
  8.                fill: #33cc33;" /> 
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.  
    12.

運(yùn)行后效果預(yù)覽圖:

已經(jīng)注意到，三角形中只有兩條線是用描邊顏色（深綠色）繪制的。原因是，僅繪制了列出的點(diǎn)之間的線。沒(méi)有畫(huà)回第一點(diǎn)的線。為此，points再次將第一個(gè)點(diǎn)添加到屬性中。

如下所示:

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     項(xiàng)目 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.    
    10.   
  
  
  
  10.  
    11.

運(yùn)行的圖像結(jié)果如下：

該style屬性設(shè)置筆劃（線條）的顏色和粗細(xì)以及填充顏色。

三、總結(jié)

本文基于Html基礎(chǔ)，使用SVG畫(huà)不一樣的線，畫(huà)出不一樣圖形。SVG 元素畫(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)。


網(wǎng)站名稱：一篇文章教會(huì)你使用SVG 畫(huà)線
文章源于：http://www.5511xx.com/article/ccsogdd.html