3本以上の複数の線分でできた多角形(ポリゴン)は<polygon>要素を使って描きます。 描くポリゴンは、それぞれの頂点を表す座標のペアでpoints属性に指定します。
<polygon points="x1,y1 x2,y2, x3, y3 ... " />
<polygon>属性に指定する頂点座標のリストを区切る文字は、空白でも,でもかまいません。
ポリゴンの始点と終点は自動的に結ばれて必ず閉じた図形になります。また、ポリゴンの線は交差しても構いません。
ポリゴンは、fill属性に指定した色で塗り潰すことができます。
ポリゴンを描くために
名前 | 意味 | 属性値の例 |
---|---|---|
points | 頂点座標ペアのリスト | 80, 20, 90, 50, 70, 50, 80, 20 |
stroke | 線の色 | blue,red |
stroke-width | 線の太さ | 1px |
fill | 塗り潰し色 | none(塗り潰さない)、gray |
次の例は星型のポリゴンを描くコードの例です。
<svg width="300" height="200" stroke="black" stroke-width="1px">
// 塗り潰さないポリゴン
<polygon points="40,10 50,40 80,50 50,60 40,80 30,50 10,40 30,30" style="fill:none" />
// 塗り潰したポリゴン
<polygon points="130 10 130 70 100 20 150 40 100 60" stroke-width="3" style="fill:gray" />
</svg>