日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
一篇文章教會你使用SVG畫多邊形

大家好，我是前端進階者。

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

一、 Polygon 畫多邊形

簡單的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.

運行后效果如下:

解析：

即使僅列出了3個點，也都繪制了所有3個面。這是因為 元素在所有點之間繪制線，包括從最后一個點到第一個點的一條線。該 不會從最后一點到第一畫線。

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

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

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

下面是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.

運行效果如下：

四、八邊形

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

 
 
 
 
    
  
  
  
  
  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.

運行效果如下：

五、SVG 畫五角星

案例

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

代碼如下:

 
 
 
 
    
  
  
  
  
  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.

運行后效果如下:

改變 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.

運行效果：

六、總結

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

歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

代碼很簡單，希望對你學習有幫助。


網頁標題：一篇文章教會你使用SVG畫多邊形
URL分享：http://www.dlmjj.cn/article/djeepog.html