2024/01-2024/01/02

svg タグ: JavaScript: ドラッグ操作

概略

svg 図形をマウスなどのドラッグ操作で移動させる話です。ドラッグ操作で svg 図形を移動する方法はいくつかあります。用途に応じて適した方法を使い分けます。

svg が img 要素でリンクされた外部の画像ファイル。
この場合は img 要素をドラッグ操作する話になります。
svg が HTML の中にある svg 要素。
ドローソフト風の操作などを行う Web アプリケーションでは svg 図形を外部の画像ファイルではなく、 HTML 内の要素として格納しています。 JavaScript や CSS で細かい操作を行う話はこちらになります。

div などの親要素に対して絶対座標 (CSS の position: absolute;) で配置した svg 要素や img 要素の座標を変更することで移動する。
こちらは svg 画像全体を動かす話になります。svg 内の細かい操作には適していません。
CSS position: absolute;
svg 要素内の画像部品を svg に対する絶対座標や transform で移動する。
svg 全体ではなくて svg 要素内の特定の画像部品を動かす話などはこちらになります。 CSS の transform や absolute とは異なる話になります。
svg タグ: JavaScript: transform で図形を操作する

このページでは主に 1. の話を紹介しています。

draggable 属性の方が JavaScript の処理が単純になりますが、細かい調整はできません。draggable 属性は大雑把な操作に適しています。 MouseEvent では細かい調整もできますが JavaScript のコードも多くなり、処理も重いのが欠点です。

TestJS_draggable_svg01.html (2024/01)
SVG のグリッド画像をドラッグ移動する。こちらは HTML の draggable 属性で処理するサンプルです。img 要素でリンクされた外部の svg ファイルの画像を移動します。

TestJS_draggable_svg02.html (2024/01)
こちらは HTML 内にある svg 要素の画像をドラッグ操作で移動します。 svg 要素には offsetTop, offsetLeft がないので上の img のような処理を svg に対して直接行えません。ということで svg を div で囲って div 要素をドラッグ移動します。

1) グリッドの svg 画像が img 要素でリンクされた外部画像ファイルの場合は、例えばグリッドの縦横の個数を変えるなどの細かい操作はできません。
2) HTML 内に svg 要素を置いてある場合は JavaScript を使って svg 内の要素を削除したり追加したりするといった細かい操作もできます。また、svg 内の要素を CSS で装飾するのも簡単に行えます。

TestJS_mouse_svg_drag01.html (2023)
SVG のグリッド画像をマウス操作でドラッグ移動するサンプル。こちらは MouseEvent で svg を格納した div 要素の座標を更新するサンプルです。