本節我們來學習如何在 SVG 中繪製曲折線，繪製曲折線可以使用 <polyline> 元素來實現。
如何繪製曲折線
曲折線就是通過一系列的直線連接多個點，然後組合成任意形狀。曲折線可以通過 SVG 中的 <polyline> 元素來繪製。<polyline> 元素中的 points 屬性用於定義繪製折線所需的點列表，即 x 和 y 座標對。x 座標和 y 座標之間使用逗號分隔，座標對之間使用空格分隔。
語法格式：
<polyline points="x1,y1 x2,y2 x3,y3 ... xn,yn"></polyline>
示例：
通過五個點創建一個曲折線：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px">
<polyline points="20,20 20,100 100,100 100,200 200,200" style="fill:none; stroke: #5ae6b7; stroke-width:3px;"></polyline>
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
曲折線會默認有一個黑色的填充色，如果要去掉這個填充色，可以將 fill 屬性設置爲 none。然後通過 stroke 屬性設置曲折線的顏色，stroke-width 設置曲折線的寬度。
繪製一個帶有填充色的梯形
我們已經知道了曲折線會默認帶有一個黑色的填充色，這說明我們可以通過 fill 屬性自己重新定義曲折線的填充色。
示例：
繪製一個紫色的梯形折線：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px">
<polyline points="20,150 50,50 150,50 180,150" style="fill:#d995eb; stroke: #5ae6b7; stroke-width:3px;"></polyline>
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
上圖中，紫色部分就是曲折線的填充顏色，綠色是曲折線的線條顏色。可以明顯看到，曲折線之間是不閉合的。