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;
}

演示小提琴：http://jsfiddle.net/7fh68sb5/2/

检测svg坐标悬停在上面

1 个答案:

编辑：纯JavaScript解决方案