<polyline> 標籤的用法跟多邊形 polygon 的用法基本上是一樣的,主要差別在使用 polyline 時,記得把 fill 屬性設為 none 才會有線的效果。
檢視原始碼 HTML
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="10,10 60,60 110,10 160,80, 230,30" style="fill:none;stroke:black;" /> </svg> |
折線也是是由多條線組合而成的,所以 points 中指定每一個座標點會依序連成線,而點跟點之間用空格區隔。
當然也能自訂樣式及組合成不同的圖形:
檢視原始碼 HTML
1 2 3 4 5 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="100,10 40,180 190,60 10,60 160,180 100,10" style="fill:none;stroke:black;stroke-width:4;" /> <polyline points="200,160 240,160 240,120 280,120 280,80 320,80 320,40 360,40" style="fill:none;stroke:green;stroke-width:4;" /> </svg> |
筆者將 polyline 的屬性整理成一個簡單的表格:
polyline 屬性
屬性名稱 | 屬性說明 |
---|---|
points | 每一個座標位置,x1,y1 x2,y2, x3,y3... |
transform | 折線的變形效果,類似 css 中的 transform |