ellipseタグ -SVG内で楕円を描画する｜HTML辞典
<ellipse>タグとは？
<ellipse> タグは、SVG（Scalable Vector Graphics）内で楕円を描画するためのタグです。cx（中心のX座標）、cy（中心のY座標）、rx（水平方向の半径）、ry（垂直方向の半径）を指定することで楕円を定義できます。
基本情報
コンテンツモデル
SVG コンテンツ（SVG Content）。
閉じタグの有無
<ellipse> は 自己終了タグ（<ellipse />）として使用可能 ですが、明示的に <ellipse></ellipse> の形式で記述することもできます。
基本的な記述方法
<svg width="200" height="200">
<ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" />
</svg>
✅ 楕円の中心が (100,100)、水平方向の半径 80、垂直方向の半径 50 の青い楕円が描画されます。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
cx | 楕円の中心の X 座標 | <ellipse cx="100"> |
cy | 楕円の中心の Y 座標 | <ellipse cy="100"> |
rx | 楕円の水平方向の半径 | <ellipse rx="50"> |
ry | 楕円の垂直方向の半径 | <ellipse ry="30"> |
fill | 塗りつぶしの色 | <ellipse fill="red"> |
stroke | 枠線の色 | <ellipse stroke="black"> |
stroke-width | 枠線の太さ | <ellipse stroke-width="2"> |
枠線付きの楕円を描画する
<svg width="200" height="200">
<ellipse cx="100" cy="100" rx="80" ry="50" fill="none" stroke="red" stroke-width="5" />
</svg>
✅ 赤い枠線のみの楕円が描画されます。
CSSを使ったデザイン変更
SVG の要素には CSS を適用できます。
ellipse {
fill: orange;
stroke: black;
stroke-width: 3;
}
✅ このスタイルを適用すると、すべての <ellipse> 要素がオレンジ色になり、黒い枠線が追加されます。
適切な使用例
✅ cx、cy で中心位置を指定して楕円を描画する
<svg width="200" height="200">
<ellipse cx="100" cy="100" rx="60" ry="30" fill="blue" />
</svg>
✅ stroke を指定して枠線付きの楕円を作成する
<svg width="200" height="200">
<ellipse cx="100" cy="100" rx="80" ry="40" fill="none" stroke="red" stroke-width="3" />
</svg>
✅ 複数の楕円を描画する
<svg width="200" height="200">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="blue" />
<ellipse cx="150" cy="50" rx="40" ry="20" fill="green" />
<ellipse cx="100" cy="150" rx="40" ry="20" fill="red" />
</svg>
✅ 異なる位置に 3 つの楕円が描画されます。
適切でない使用例（誤った使い方）
❌ rx または ry（半径）を指定しない（描画されない）
<!-- NG: 半径を指定しない -->
<svg width="200" height="200">
<ellipse cx="50" cy="50" fill="blue" />
</svg>
✅ 正しい書き方（rx と ry を指定）
<svg width="200" height="200">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="blue" />
</svg>
❌ <ellipse> を <svg> の外に記述する
<!-- NG: <svg> の外に <ellipse> を記述 -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="red" />
<svg width="200" height="200"></svg>
✅ 正しい書き方（<svg> 内に記述）
<svg width="200" height="200">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="red" />
</svg>
<ellipse>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<ellipse> | 楕円を描画 | cx、cy、rx、ry を指定 | 横長・縦長の楕円形 |
<circle> | 円を描画 | cx、cy、r を指定 | 丸いボタンや装飾 |
<rect> | 長方形を描画 | x、y、width、height を指定 | 四角形のオブジェクト |
<line> | 直線を描画 | x1、y1、x2、y2 を指定 | グラフや境界線 |
<polygon> | 多角形を描画 | points 属性で座標を指定 | 星形や三角形 |
使用上の注意点
✅ <ellipse> は <svg> 内で使用する
- HTML の通常の構造では描画できないため、必ず
<svg>の中に記述する。
✅ cx、cy、rx、ry を適切に指定する
- これらの属性を指定しないと描画されない。
✅ fill や stroke を活用してデザインを整える
- 色や枠線を適用して、視認性を向上させる。
関連タグ
<svg>– SVG コンテンツを定義<rect>– 長方形を描画<circle>– 円を描画<line>– 直線を描画<polygon>– 多角形を描画<path>– 任意の図形を描画
まとめ
<ellipse> タグは、SVG 内で 楕円を描画するためのタグ です。
適切に使用することで、シンプルな楕円形から装飾的な楕円デザインまで、さまざまな用途に対応できます。
