Home » SVG 入門教學

[SVG]SVG 基本圖形 - 多邊形 polygon

rect 標籤只能產生四四方方的矩形,若想要產生不規則的多邊形的話,則得使用 <polygon> 標籤。

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<polygon points="310,10 30,110 120,300 320,150" />
</svg>

多邊形就是由多條線組合而成的,所以 points 中指定每一個座標點會依序連成線,而點跟點之間用空格區隔。
svg-shape-polygon-1

當然也能自訂樣式:

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:steelblue;stroke:black;stroke-width:4;" />
</svg>

svg-shape-polygon-2

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

polygon 屬性

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

[ 標籤: ]

發表迴響