SVGチュートリアル

SVG要素

SVG<polygon>で多角形を描画

polygon要素は、一連の直線線段で構成された閉じた多角形の形状を定義します。最後の点は最初の点に結びつけられます。<polygon>要素は、複数（3面（またはそれ以上）/縁の形状です。

SVG Polygon多角形の例

これはシンプルなSVG多角形の例です:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon　points="10,0　　60,0　　35,50"
　　　　　　　　　style="stroke:#660000;　fill:#cc3333;"/>
</svg>

テストをしてみる ‹/›

実行後の効果は以下の通り:

おそらくご注意いただけるかもしれませんが、3点もすべて描画されています3面がすべて描画されています。これは<polygon>要素がすべての点間に線を引くためです。最後の点から最初の点までの線も含まれます。<polyline>は最後の点から最初の点までの線を引かないため、これが<polygon>要素と<polyline>要素の唯一の違いです。

六角形を描画します

以下は例コードです:

例

<svg　width="120"　height="120"　viewPort="0　0　120　120"　version="1.1"　　　　
xmlns="http://www.w3.org/2000/svg">　　　　
<polygon　points="60,20　100,40　100,80　60,100　20,80　20,40"/>　　　　
</svg>

テストをしてみる ‹/›

実行結果は以下の通りです

八角形を描画します

これはもっと大きな例です-8辺の多角形(八角形):

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon　points="50,5　　　100,5　　125,30　　125,80　100,105
　　　　　　　　　　　　　　　　　　　50,105　　25,80　　25,　30"
　　　　　　　　　　style="stroke:#660000;　fill:#cc3333;　stroke-width:　3;"/>
</svg>

テストをしてみる ‹/›

SVG五角星を描画

以下は例コードです:

例

<svg　xmlns="http://www.w3.org/2000/svg"　version="1.1">
　　<polygon　points="100,10　40,180　190,60　10,60　160,180"　style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

テストをしてみる ‹/›

実行後の効果は以下の通り:

SVG<path>パス SVG<polyline>で曲線を描画