SVG <polyline> 繪製折線

admin發表於2018-11-05
SVG

本文介紹一下如何利用SVG繪製一條折線。

繪製之前首先要明確一下什麼是折線，具有如下幾個特點：

（1）.通過直線將多個點連線起來。

（2）.折線是非閉合的，也就是起始點與終止點不會連線起來，否則那將是多邊形。

關於繪製多邊形內容參閱SVG <polygon> 多邊形一章節。

通過<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">
  <polyline 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/05/125113y3tx3t2gtxeexlx3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

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

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

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

相關文章