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

HTML5 SVGで楕円を描く方法｜ellipse要素の使い方をわかりやすく解説

SVGとは？

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

HTML5 SVGで楕円を描く基本

HTMLのSVGで楕円を描くには、SVGの<ellipse>要素を使用します。この要素では、以下の属性を指定することで楕円の位置と形状を自由にコントロールできます。

  • cx： 楕円の中心のX座標
  • cy： 楕円の中心のY座標
  • rx： 横方向（X軸）の半径
  • ry： 縦方向（Y軸）の半径
  • fill： 塗りつぶしの色

HTML5 SVGで楕円を描く方法｜ellipse要素の使い方をわかりやすく解説

サンプルコード

それでは、実際に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 Ellipse</title>
</head>

<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg">
<ellipse cx = "120" cy = "50" rx = "100" ry = "50" fill = "blue" />
</svg>
</body>
</html>

コードのポイント

このサンプルでは、<svg>要素で幅300px・高さ200pxの描画領域を作成し、その中に<ellipse>要素を配置しています。cx="120"、cy="50"で楕円の中心位置を指定し、rx="100"、ry="50"で横長の楕円になるよう半径を設定しています。また、fill="blue"により塗りつぶし色を青色にしています。

実行結果

上記のコードをブラウザで実行すると、次のように青色の楕円が表示されます。

HTML5 SVGで楕円を描く方法｜ellipse要素の使い方をわかりやすく解説

rxとryの値を変更すれば、正円に近い形や細長い楕円など、さまざまな形状を簡単に作成できます。ぜひ数値をいろいろと変えて試してみてください。

  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のstrokeText()メソッドでキャンバスにテキストを描画する方法

    HTML5のCanvas（キャンバス）上にテキストを描画するには、strokeText()メソッドを使用します。このメソッドは、指定されたx座標・y座標の位置に、テキストの輪郭線（ストローク）を描画します。デフォルトの色は黒です。strokeText()メソッドの構文strokeText(text, x, y [, maxWidth ])パラメータの説明strokeText()メソッドに渡す各パラメータは以下のとおりです。番号パラメータ説明1text描画するテキスト文字列2x描画を開始する位置のx座標3y描画を開始する位置のy座標4maxWidth許容される最大幅（ピクセル単位）。省略可能です