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

HTML5 SVGで長方形を描画する方法【rect要素の基本】

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

HTMLのSVGで長方形を描画するには、SVGの<rect>要素を使用します。<rect>要素では、width属性やheight属性でサイズを指定し、fill属性で塗りつぶしの色を設定できます。

HTML5 SVGで長方形を描画する方法【rect要素の基本】

サンプルコード

以下のコードを実行すると、HTML5 SVGで長方形を描画する方法を確認できます。SVG要素にはCSSで位置調整を加え、ページ中央付近に配置しています。

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

   <body>
      <h2>HTML5 SVG Rectangle</h2>
      <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
         <rect width="200" height="100" fill="green"/>
      </svg>
   </body>
</html>

実行結果

このコードをブラウザで表示すると、幅200px・高さ100pxの緑色の長方形が描画されます。

HTML5 SVGで長方形を描画する方法【rect要素の基本】

  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