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

【初心者向け】HTML5 SVGで円を描く方法をわかりやすく解説

SVGとは？

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

HTMLのSVGで円を描くには、<circle>要素を使用します。

【初心者向け】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 Circle</title>
   </head>

   <body>
      <h2>HTML5 SVG Circle</h2>
      <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
         <circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
      </svg>
   </body>
</html>

出力結果

【初心者向け】HTML5 SVGで円を描く方法をわかりやすく解説

circle要素の主な属性

<circle>要素では、以下の属性を使って円の位置や大きさ、見た目を自由に指定できます。

  • cx：円の中心のX座標
  • cy：円の中心のY座標
  • r：円の半径
  • fill：塗りつぶしの色

上記のサンプルコードでは、cx="60"、cy="60" と指定しているため、座標(60, 60)が中心となり、半径50ピクセルの緑色の円が描画されます。これらの値を変更すれば、円の位置やサイズ、色を簡単に調整できます。

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

  2. HTML5のarc()メソッドで円を描く方法をわかりやすく解説

    HTML5では、<canvas>要素とarc()メソッドを組み合わせることで、簡単に円を描くことができます。完全な円を描きたい場合は、開始角度を「0」、終了角度を「2 * Math.PI」に指定するのがポイントです。 arc()メソッドのパラメータ一覧 arc()メソッドには、以下の6つのパラメータを渡します。 No.パラメータ説明 1x円の中心のx座標 2y円の中心のy座標 3r円の半径 4startingAngle描画開始の角度（ラジアン単位） 5endingAngle描画終了の角度（ラジアン単位） 6counterclockwise（true / false）反時計回りに