SVG <polygon>
Polygon 來自希臘語。"Poly" 意為 "許多"，"gon" 意為 "角度"。
SVG 多邊形 - <polygon>
SVG <polygon> 元素用於建立至少包含三條邊的圖形。
多邊形由直線組成，並且形狀是 "閉合的"（它會自動將最後一個點與第一個點連線起來）。
<polygon> 元素有一個基本屬性，用於定義多邊形的點。
| Attribute | 描述 |
|---|---|
| points | 必需。多邊形點的列表。每個點必須包含一個 x 座標和一個 y 座標。 |
三邊多邊形
以下示例建立一個三邊多邊形。
這是 SVG 程式碼
示例
<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
自己動手試一試 »
程式碼解釋
points屬性定義了多邊形每個角的 x 和 y 座標。
四邊多邊形
以下示例建立一個四邊多邊形。
這是 SVG 程式碼
示例
<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
自己動手試一試 »
六邊多邊形
以下示例建立一個六邊多邊形。
這是 SVG 程式碼
示例
<svg height="280" width="360" xmlns="http://www.w3.org/2000/svg">
<polygon points="150,15 258,77 258,202 150,265 42,202 42,77"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
自己動手試一試 »
多邊形星形
使用 <polygon> 元素建立星形。
這是 SVG 程式碼
示例
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>
自己動手試一試 »
另一個多邊形星形
使用 fill-rule 屬性來指定形狀的內部部分。
這是 SVG 程式碼
示例
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
自己動手試一試 »
程式碼解釋
fill-rule屬性定義了用於指定形狀內部部分的演算法。
