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

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

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

polygon要素を使った多角形の描画

HTMLのSVGで多角形を描くには、<polygon>要素を使用します。この要素は、3つ以上の辺を持つ図形を作成できます。HTML5 SVGで星形を描く場合は、各頂点のx座標とy座標を適切に設定することがポイントです。

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

サンプルコード

以下のコードを実行すると、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 Star</title>
   </head>
   <body>
      <h2>HTML5 SVG Star</h2>
         <svg id = "svgelem" width = "300" height = "300" xmlns = "https://www.w3.org/2000/svg">
            <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue"/>
         </svg>
   </body>
</html>

実行結果

上記のコードをブラウザで表示すると、青色に塗りつぶされた五角形の星が描画されます。points属性には「x,y」のペアをカンマ区切りで指定し、複数の頂点を半角スペースで区切って並べます。この例では5つの頂点を指定することで星形を表現しています。

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

ポイントまとめ

  • <polygon>要素： 3辺以上の多角形を描画するためのSVG要素です。
  • points属性： 各頂点の座標を「x,y」形式で指定します。頂点の順序がそのまま線の結ばれる順序になります。
  • fill属性： 図形の塗りつぶし色を指定できます。「blue」のほか、「#0000ff」のようなカラーコードも使用可能です。

頂点の座標を工夫することで、さまざまな多角形や星形を自由に描くことができるので、ぜひいろいろな値を試してみてください。

  1. SVGで中空の円（輪郭のみの円）を描く方法を解説

    SVGで中空の円（塗りつぶしなしの輪郭だけの円）を描くには、<circle>要素を使用します。ポイントは、fill=noneを指定して内側を透明にし、stroke属性で輪郭線を描画することです。SVGとは？SVG（Scalable Vector Graphics）は、XMLを使って2Dグラフィックスやグラフィカルアプリケーションを記述するための言語です。記述されたXMLはSVGビューアによってレンダリングされます。現在の主要なWebブラウザのほとんどは、PNG・GIF・JPGなどの画像形式と同じようにSVGを表示できます。サンプルコード以下のコードを実行すると、SVGで中空の円を描

  2. HTML5でSVG画像を使用する方法｜img・object・embedタグの使い分けを解説

    HTML5でSVG画像を表示する基本 HTML5でSVG（Scalable Vector Graphics）画像を利用するには、<img>要素または<svg>要素を使用します。SVGファイルをWebページに組み込む方法は主に3つあり、それぞれ特徴が異なるため、用途に応じて適切なものを選択することが重要です。 SVGを読み込む3つの方法 <img>タグ：最もシンプルな方法。JPEGやPNGなどの通常の画像と同じ感覚で扱えます。 <object>タグ：外部リソースとしてSVGを読み込みます。フォールバックコンテンツを指定できるのが特徴です。 &l