lineタグ -SVG内で直線を描画する｜HTML辞典
<line>タグとは？
<line> タグは、SVG（Scalable Vector Graphics）内で直線を描画するためのタグです。x1（始点のX座標）、y1（始点のY座標）、x2（終点のX座標）、y2（終点のY座標）を指定することで直線を定義できます。
基本情報
コンテンツモデル
SVG コンテンツ（SVG Content）。
閉じタグの有無
<line> は 自己終了タグ（<line />）として使用可能 です。
基本的な記述方法
<svg width="200" height="200">
<line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2" />
</svg>
✅ (10,10) から (190,190) までの黒い直線が描画されます。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
x1 | 始点の X 座標 | <line x1="10"> |
y1 | 始点の Y 座標 | <line y1="10"> |
x2 | 終点の X 座標 | <line x2="100"> |
y2 | 終点の Y 座標 | <line y2="100"> |
stroke | 線の色 | <line stroke="blue"> |
stroke-width | 線の太さ | <line stroke-width="3"> |
stroke-dasharray | 破線の設定 | <line stroke-dasharray="5,5"> |
破線を描画する
<svg width="200" height="200">
<line x1="10" y1="100" x2="190" y2="100" stroke="red" stroke-width="3" stroke-dasharray="5,5" />
</svg>
✅ 赤い破線が描画されます。
CSSを使ったデザイン変更
SVG の要素には CSS を適用できます。
line {
stroke: green;
stroke-width: 4;
}
✅ すべての <line> 要素に緑色の線が適用されます。
適切な使用例
✅ x1, y1, x2, y2 を指定して直線を描画する
<svg width="200" height="200">
<line x1="20" y1="20" x2="180" y2="20" stroke="black" stroke-width="2" />
</svg>
✅ stroke-dasharray を使って破線を作成する
<svg width="200" height="200">
<line x1="20" y1="50" x2="180" y2="50" stroke="blue" stroke-width="3" stroke-dasharray="4,2" />
</svg>
✅ stroke-linecap を使って線の端を変更する
<svg width="200" height="50">
<line x1="20" y1="25" x2="180" y2="25" stroke="black" stroke-width="5" stroke-linecap="round" />
</svg>
✅ 線の端が丸くなります。
適切でない使用例（誤った使い方）
❌ x1 や y1 を指定しない（描画されない）
<!-- NG: 始点や終点の座標を指定しない -->
<svg width="200" height="200">
<line stroke="black" stroke-width="2" />
</svg>
✅ 正しい書き方（x1, y1, x2, y2 を指定）
<svg width="200" height="200">
<line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2" />
</svg>
❌ <line> を <svg> の外に記述する
<!-- NG: <svg> の外に <line> を記述 -->
<line x1="50" y1="50" x2="150" y2="150" stroke="red" />
<svg width="200" height="200"></svg>
✅ 正しい書き方（<svg> 内に記述）
<svg width="200" height="200">
<line x1="50" y1="50" x2="150" y2="150" stroke="red" />
</svg>
<line>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<line> | 直線を描画 | x1、y1、x2、y2 を指定 | グラフや境界線 |
<polyline> | 複数の線を連続して描画 | points 属性で座標を指定 | 折れ線グラフなど |
<rect> | 長方形を描画 | x、y、width、height を指定 | 四角形のオブジェクト |
<circle> | 円を描画 | cx、cy、r を指定 | 丸いボタンや装飾 |
<polygon> | 多角形を描画 | points 属性で座標を指定 | 星形や三角形 |
使用上の注意点
✅ <line> は <svg> 内で使用する
- HTML の通常の構造では描画できないため、必ず
<svg>の中に記述する。
✅ x1, y1, x2, y2 を適切に指定する
- これらの属性を指定しないと描画されない。
✅ stroke と stroke-width を活用してデザインを整える
- 線の色や太さを適用して、視認性を向上させる。
関連タグ
<svg>– SVG コンテンツを定義<rect>– 長方形を描画<circle>– 円を描画<ellipse>– 楕円を描画<polyline>– 折れ線を描画<polygon>– 多角形を描画
まとめ
<line> タグは、SVG 内で 直線を描画するためのタグ です。
適切に使用することで、境界線やグラフの要素として活用できます。
