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

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

HTML5では、SVG（Scalable Vector Graphics）を使うことで、画像ファイルに頼らずにブラウザ上で直接ベクター図形を描画できます。この記事では、<polygon>（ポリゴン）タグを使用して、赤い星の形を描くシンプルなサンプルを紹介します。

星形を描く仕組み

星形は、<polygon>タグのpoints属性に5つの頂点の座標を「x,y」のペアで指定することで描画されます。各頂点が直線で結ばれ、閉じた多角形として表示されます。また、fill属性で塗りつぶしの色を指定できます。この例では「red」を指定しているため、赤い星として描画されます。

サンプルコード

<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>

コードのポイント

  • points属性：「100,10」「40,180」「190,60」「10,60」「160,180」の5つの座標を指定しています。これらの点を順に結ぶことで、五角形の星の輪郭が形成されます。
  • fill属性：図形の内部を塗りつぶす色を指定します。「red」以外にも、カラーコード（#ff0000など）や色名（gold、blueなど）を自由に設定できます。
  • 中央揃えのCSS：スタイルシートのtransform: translateX()を使うことで、SVG要素を画面上で中央寄せに配置しています。

実行結果

上記のコードをブラウザで開くと、次のように赤い星形が表示されます。

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

頂点の座標を変更すれば、星の大きさや角度を調整できます。stroke属性を追加すれば輪郭線の色も設定できるので、さまざまなバリエーションに挑戦してみてください。

  1. HTML5 SVGで角丸の長方形を作成する方法【rx・ry属性の使い方】

    SVG（Scalable Vector Graphics）は、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語です。記述されたXMLは、SVGビューアによって描画されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できるようになっています。HTMLのSVGで長方形を描画するには、<rect>要素を使用します。さらに、角を丸くしたい場合はrx属性とry属性を指定します。この2つの属性に値を設定することで、長方形の四隅が滑らかに丸められます。実装例以下のコードを実行すると、HTML5 SVGで角

  2. HTML5でSVG（Scalable Vector Graphics）を操作する方法をわかりやすく解説

    SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称で、2DグラフィックスやグラフィックアプリケーションをXML形式で記述するための言語です。記述されたXMLコードは、SVGビューアによって描画されます。SVGは、円グラフやXY座標系における2次元グラフなど、ベクター形式の図表を扱う場面で特に威力を発揮します。拡大・縮小しても画質が劣化しない点も大きな特徴です。HTML5でSVGを使用する基本的な方法HTML5でSVG（Scalable Vector Graphics）を扱うには、<svg>...</svg>タグを