检测正在悬停的svg坐标

Detect svg coordinates being hovered over

本文关键字：svg 坐标 悬停 检测      更新时间：2023-09-26

我有一个SVG元素

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

假设鼠标悬停在svg元素上。是否有一种方法可以显示鼠标悬停在上面的点的坐标，无论是在工具提示中还是在svg下面的div中?这最好使用javascript。谢谢!

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

<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/

相关文章：