SVG多邊形 - <多邊形>
所述<polygon>元素用於創建包含至少三個側面的圖形。
多邊形是由直線,形狀"closed" (所有的線連接起來)。
多邊形來自希臘語。 "Poly"是指"many"和"gon"手段"angle" 。
例1
下面的示例創建一個具有三個邊的多邊形:
下面是SVG代碼:
例
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
試一試» Code explanation:
- 該points屬性定義了x和為多邊形的每個角落y坐標
例2
下面的示例創建四個邊的多邊形:
下面是SVG代碼:
例
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
試一試» 例3
使用<polygon>元素創建一個明星:
下面是SVG代碼:
例
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
試一試» 例4
填充規則屬性更改為"evenodd"
下面是SVG代碼:
例
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
試一試»