最新的Web開發教程
 

SVG <多邊形>


SVG多邊形 - <多邊形>

所述<polygon>元素用於創建包含至少三個側面的圖形。

多邊形是由直線,形狀"closed" (所有的線連接起來)。

多邊形來自希臘語。 "Poly"是指"many""gon"手段"angle"


例1

下面的示例創建一個具有三個邊的多邊形:

對不起,您的瀏覽器不支持嵌入式SVG。

下面是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代碼:

<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代碼:

<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代碼:

<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>
試一試»