SVG上のマウスカーソルの座標を取得

icon 項目のみ表示/展開表示の切り替え

SVG上のマウスカーソルの座標を取得

　下図の青い長方形の中にカーソルがある場合、座標値を長方形の上部に表示するサンプルです。
座標

htmlソース

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <span id="text1">座標</span><br />
  <svg id="svg" onmousemove="move()" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 280 240" height="240" width="280">
    <rect stroke="blue" fill="none" height="240" width="280" y="0" x="0"></rect>
  </svg> 
  <script type="text/javascript">
    function move(){
      demo_run=0;
      var s = document.getElementById('svg');
      var r = s.getBoundingClientRect();
      var x=Math.round(event.clientX-r.left);
      var y=Math.round(event.clientY-r.top);
      var t = document.getElementById('text1');
      t.innerText=x+","+y;
    }
  </script>
</body>
</html>