SVG <ポリゴン>
SVGポリゴン-<ポリゴン>
<polygon>要素は、少なくとも3つの辺を含むグラフィックを作成するために使用されます。
ポリゴンは直線でできており、形状は「閉じている」（すべての線がつながっている）。
ポリゴンはギリシャ語から来ています。「ポリ」は「多く」を意味し、「ゴン」は「角度」を意味します。
例1
次の例では、3つの辺を持つポリゴンを作成します。
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
次の例では、4つの辺を持つポリゴンを作成します。
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>