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