javascript - 检测悬停在上方的 svg 坐标

Question

我有一个 SVG 元素

<svg id='win-frame' style='height: 500px; width: 500px;'>
</svg>

假设鼠标悬停在 svg 元素上。有没有办法在工具提示或 svg 下方的 div 中显示鼠标悬停的点的坐标？这最好使用javascript。谢谢!

Answer 1

添加文本字段以显示坐标:

<input type="text" id="coords" readonly></input>

然后处理 mousemove 和 mouseout 事件以用坐标填充 coords 输入:

/* create an svg drawing */
var draw = SVG('win-frame');

/* draw rectangle */
var rect = draw.rect(200, 200).fill('#f09')
var coordsDiv = document.getElementById('coords');
rect.mousemove(function(evt) {
  coordsDiv.value = evt.clientX + ' ' + evt.clientY;
}).mouseout(function() {
  coordsDiv.value = '';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.0.5/svg.js"></script>
<div id="win-frame"></div>
<input type="text" id="coords" readonly />

编辑:纯javascript解决方案

HTML 部分:

<svg id='win-frame' style='height: 200px; width: 200px;' >
     <rect width="100%" height="100%" style="fill:rgb(0,0,255);" />
</svg>
<input type="text" id="coords" readonly />

和javascript部分:

var coordsDiv = document.getElementById('coords');
var el1 = document.getElementById('win-frame');
el1.onmousemove = function(evt) {
     coordsDiv.value = evt.clientX + ' ' + evt.clientY;
}

演示 fiddle :http://jsfiddle.net/7fh68sb5/2/