Home » SVG 入門教學

[SVG]SVG 基本圖形 - 折線 polyline

<polyline> 標籤的用法跟多邊形 polygon 的用法基本上是一樣的,主要差別在使用 polyline 時,記得把 fill 屬性設為 none 才會有線的效果。

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 中指定每一個座標點會依序連成線,而點跟點之間用空格區隔。
svg-shape-polyline-1

當然也能自訂樣式及組合成不同的圖形:

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>

svg-shape-polyline-2

筆者將 polyline 的屬性整理成一個簡單的表格:

polyline 屬性

屬性名稱 屬性說明
points 每一個座標位置,x1,y1 x2,y2, x3,y3...
transform 折線的變形效果,類似 css 中的 transform

[ 標籤: ]

發表迴響