要素内のマウス座標を取る
#ドラッガブル なUIを作るときに必要。
#マウス #イベント
SVGにおいてoffsetX / offsetYは使えるのか問題
IE, Chrome, Safari
包含SVG要素からのoffsetが取得される
Firefox
currentTargetからのoffsetが計算される
つまり・・・ブラウザ実装によるのでこれらは使えない。
getBBoxとgetBoundingClientRectどっち使うべき？
残念ながらviewBoxを使って拡大したときに取れる座標がほしいものではない・・・
と思ったが、getBBoxが正解だった（getBBoxはローカル座標で取れるので、clientX / Yの値を代入する前にgetScreenCTM変換が必要）
http://phrogz.net/getboundingclientrect-is-lame-for-svg
あとで読む
検証中（transformの扱いが異なる）
https://codepen.io/hashrock/pen/aQpwVX
getScreenCTMで補正しましょうねという記事
http://wphooper.com/svg/examples/mouse_positions.php
https://www.webprofessional.jp/how-to-translate-from-dom-to-svg-coordinates-and-back-again/
この辺はまぁよしなに
ドラッガブル要素をちゃんと実装してみよう。
https://gyazo.com/5608a0dbbb8a779ff911fd606f7b2f6f
新実装（viewBoxが等倍以外でも動作）
https://study-svg-examples.netlify.com/events.html#demo
旧実装（バグあり）
https://codepen.io/hashrock/pen/VVPQqV
考え方としては
要素内のマウスクリックした位置を取得し、それをオフセットとして保持しておく
矩形をドラッグしたいということは、左上の点（x, y）を移動したいということ
mousemoveで取れてくるスクリーン座標からoffset（緑領域）を引くと、動かしたい先の座標が計算できる。