SVG <polygon> 多邊形

admin發表於2018-11-06
SVGGo

本文介紹一下利用SVG繪製一個多邊形。

多邊形是由利用直線連線多個點形成的封閉圖形。

如果不是封閉的，那就是折線而不是多邊形。

關於折線可以參閱SVG <polyline> 繪製折線一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg width="300" height="200">
  <polygon points="10,2 60,2 35,52"
    stroke="red"
    stroke-width=2;
    fill="green" />
</svg>  
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/101602g2oal4rav90rtgl9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.points：此屬性定義構成多邊形的一系列的點，每一個點由兩個用逗號分隔的數字構成，第一個數字表示x軸座標，第二個數字表示y軸座標，點與點之間用空格分隔。

（2）.stroke：此屬性定義折線描邊的顏色。

（3）.stroke-width：此屬性定義折線的粗細。

相關文章