SVG <polygon>

SVG 多角形 - <polygon>

<polygon> 要素は少なくとも三つの辺を持つ図形を作成するために使用されます。

多角形は直線で構成され、形状は「閉じた」(すべての線が繋がっている)です。

Polygon という単語はギリシャ語から来ており、"Poly" は「多くの」、"gon" は「角度」を意味します。

例1

以下は、三つの辺を持つ多角形を作成する例です：

これは SVG コードです：

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

実際に試してみる

コードの説明：

  • 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

fill-rule 属性を変更して "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>

実際に試してみる