一篇文章教會你使用SVG 畫多邊形

作者：前端進階者 2021-03-19 10:01:41

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

[[388621]]

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

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

一、 Polygon 畫多邊形

簡單的SVG多邊形:

例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
  <body style="background-color: aqua;"> 
 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
<polygon points="10,0 60,0 35,50" style="stroke:#660000; fill:#cc3333;" /> 
</svg> 
 
</body> 
</html>

運行后效果如下:

解析：

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

這似乎是和元素的唯一區別。

二、繪制不規則四邊形

下面的示例創建一個四邊的多邊形：

下面是SVG代碼：

<!DOCTYPE html> 
<html> 
<body style="background-color: aqua;"> 
 
<svg height="250" width="500"> 
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" /> 
</svg> 
 
</body> 
</html>

三、繪制六邊形

代碼如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
    <body style="background-color: aqua;"> 
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke:#660000; fill:#cc3333;"> 
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40" /> 
</svg> 
 
</body> 
</html>

運行效果如下：

四、八邊形

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
  <body style="background-color: aqua;"> 
<svg xmlns="http://www.w3.org/2000/svg"           xmlns:xlink="http://www.w3.org/1999/xlink"> 
<polygon points="50,5   100,5 125,30 125,80 100,105 
                   50,105 25,80 25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;" /> 
</svg> 
 
</body> 
</html>

運行效果如下：

五、SVG 畫五角星

案例

使用元素創建一個星型:

代碼如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
    <body style="background-color: aqua;"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320"> 
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red; stroke:purple; stroke-width:5;fill-rule:nonzero;"/> 
</svg> 
 
</body> 
</html>

運行后效果如下:

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

下面是SVG代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<body style="background-color: aqua;"> 
<svg height="210" width="500"> 
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> 
</svg> 
 
</body> 
</html>

運行效果：

六、總結

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

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

責任編輯：姜華來源：前端進階學習交流