JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5の<polygon>タグの使い方と実践サンプル

HTML5における<polygon>タグとは

<polygon>タグは、SVG（Scalable Vector Graphics）内で多角形を描画するための要素です。「points」属性に頂点の座標を列挙するだけで、三角形から複雑な星形まで、自由な形状を作成できます。

以下のサンプルコードを実行すると、HTML5で<polygon>タグを使用し、赤く塗りつぶされた五芒星（星形）を表示できます。

<html>
   <head>
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>

      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body>
      <h2 align="center">HTML5 SVG Star</h2>
      <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
      <polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/>
      </svg>
   </body>
</html>

コード解説：押さえておきたいポイント

1. points属性
多角形の各頂点を「x,y」の形式で指定します。座標と座標の間はスペースで区切ります。この例では5つの頂点を指定しており、これらを順番に結んだ結果として星形が描画されます。最後の頂点と最初の頂点は自動的に閉じられます。

2. fill属性
図形の塗りつぶし色を指定します。「red」以外にも、カラーコード（例：#ff0000）や「blue」「gold」などの色名が使用可能です。塗りつぶしが不要な場合は「fill="none"」を指定します。

3. 中央配置のCSS
「position: relative」と「transform: translateX()」を組み合わせることで、SVG要素を画面中央付近に表示させています。ベンダープレフィックス（-webkit-、-ms-）も併記されており、古いブラウザへの互換性にも配慮した書き方です。

<polygon>タグをマスターすれば、ロゴやアイコンなど、装飾的なベクター画像をHTMLだけで手軽に表現できるようになります。

  1. HTML5 SVGで星形を描画する方法をわかりやすく解説

    SVG（Scalable Vector Graphics：スケーラブル・ベクター・グラフィックス）は、XML形式で2Dグラフィックや図形アプリケーションを記述するための言語です。記述されたXMLはSVGビューアによって描画されます。現在の主要なWebブラウザのほとんどは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できます。polygon要素を使った多角形の描画HTMLのSVGで多角形を描くには、<polygon>要素を使用します。この要素は、3つ以上の辺を持つ図形を作成できます。HTML5 SVGで星形を描く場合は、各頂点のx座標とy座標を適切に設定することがポイ

  2. HTML5 SVGのpolygonタグで星形を描く方法

    HTML5では、SVG（Scalable Vector Graphics）を使うことで、画像ファイルに頼らずにブラウザ上で直接ベクター図形を描画できます。この記事では、<polygon>（ポリゴン）タグを使用して、赤い星の形を描くシンプルなサンプルを紹介します。星形を描く仕組み星形は、<polygon>タグのpoints属性に5つの頂点の座標を「x,y」のペアで指定することで描画されます。各頂点が直線で結ばれ、閉じた多角形として表示されます。また、fill属性で塗りつぶしの色を指定できます。この例では「red」を指定しているため、赤い星として描画されます。サンプルコード