<polygon>

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>
  

関連項目

line


SVG目次 inserted by FC2 system