日韩无码专区无码一级三级片|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à)多邊形

大家好，我是前端進(jìn)階者。

polygon元素定義了一個(gè)由一組首尾相連的直線線段構(gòu)成的閉合多邊形形狀，最后一點(diǎn)連接到第一點(diǎn)。 元素通常用于繪制具有多個(gè)(3個(gè)或更多)側(cè)面/邊緣的形狀。

一、 Polygon 畫(huà)多邊形

簡(jiǎn)單的SVG多邊形:

例

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. Document 
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.  
    16.

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

解析：

即使僅列出了3個(gè)點(diǎn)，也都繪制了所有3個(gè)面。這是因?yàn)?元素在所有點(diǎn)之間繪制線，包括從最后一個(gè)點(diǎn)到第一個(gè)點(diǎn)的一條線。該 不會(huì)從最后一點(diǎn)到第一畫(huà)線。

這似乎是 和 元素的唯一區(qū)別。

二、繪制不規(guī)則四邊形

下面的示例創(chuàng)建一個(gè)四邊的多邊形：

下面是SVG代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.

三、繪制六邊形

代碼如下:

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. Document 
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.

運(yùn)行效果如下：

四、八邊形

8個(gè)邊的多邊形(八邊形):

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. Document 
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.   
  
  
  
  9.                    50,105 25,80 25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;" /> 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.

運(yùn)行效果如下：

五、SVG 畫(huà)五角星

案例

使用 元素創(chuàng)建一個(gè)星型:

代碼如下:

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. Document 
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.

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

改變 fill-rule 屬性為 "evenodd":

下面是SVG代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. Document 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.

運(yùn)行效果：

六、總結(jié)

本文基于Htm基礎(chǔ)，介紹了如何去畫(huà)多邊形，通過(guò)Polygon元素變換參數(shù)畫(huà)不一樣的的多邊形。(四邊形，如六邊形，八邊形等等)，最后重點(diǎn)講解了如何去畫(huà)五角星，講解畫(huà)五角星時(shí)需要注意的點(diǎn)，在轉(zhuǎn)換過(guò)程中，改變 fill-rule 屬性繪制不一樣的五角星圖像。通過(guò)豐富的案例分析，希望讀者能夠更好的去理解和學(xué)習(xí)。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。


網(wǎng)頁(yè)題目：一篇文章教會(huì)你使用SVG畫(huà)多邊形
URL鏈接：http://www.5511xx.com/article/djeepog.html