HTML5 SVGでポリゴン（多角形）を描画する方法

SVG（Scalable Vector Graphics：スケーラブルベクターグラフィックス）は、XMLを使用して2Dグラフィックや図形アプリケーションを記述するための言語です。記述されたXMLはSVGビューアによって描画されます。現在、主要なWebブラウザのほとんどは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できます。

polygon要素とは

HTMLのSVGでポリゴン（多角形）を描画するには、<polygon>要素を使用します。<polygon>要素は、3辺以上の閉じた図形を生成します。図形の形状はpoints属性で定義し、ここにはポリゴンの各頂点のx座標とy座標を「x,y」のペアで指定します。複数の頂点はスペースまたはカンマで区切って並べます。

主な属性のポイント

• points属性： 各頂点の座標を「100,20 200,180 100,200」のように指定します。
• fill属性： 図形の塗りつぶし色を指定します（例：green）。
• stroke属性： 枠線の色を指定したい場合に使用します。

コード例

以下のコードを実行して、HTML5 SVGでポリゴンを描画する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Polygon</title>
   </head>

   <body>
      <h2>HTML5 SVG Polygon</h2>
      <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
         <polygon points="100, 20 200,180 100,200" style="fill:green;" />
      </svg>
   </body>
</html>

実行結果

上記のコードでは、svg要素内にpolygon要素を配置し、3つの頂点（100,20）（200,180）（100,200）を持つ三角形を緑色で塗りつぶして描画しています。ブラウザで表示すると、次のようにポリゴンが表示されます。