rect 標籤只能產生四四方方的矩形,若想要產生不規則的多邊形的話,則得使用 <polygon> 標籤。
檢視原始碼 HTML
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 中指定每一個座標點會依序連成線,而點跟點之間用空格區隔。
當然也能自訂樣式:
檢視原始碼 HTML
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> |
筆者將 polygon 的屬性整理成一個簡單的表格:
polygon 屬性
屬性名稱 | 屬性說明 |
---|---|
points | 每一個座標位置,x1,y1 x2,y2, x3,y3... |
transform | 多邊形的變形效果,類似 css 中的 transform |