SVGポリゴン - <ポリゴン>
<polygon>要素は、少なくとも3つの側面が含まれているグラフィックを作成するために使用されます。
多角形は直線で作られており、形状がされている"closed" （すべてのラインアップ接続します）。
多角形は、ギリシャ語から来ています。 "Poly"意味"many"と"gon"手段"angle" 。
例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>
»それを自分で試してみてください Code explanation:
- 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
塗りつぶしルールのプロパティを変更"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>
»それを自分で試してみてください