我有一个 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;
}
演示 fiddle :http://jsfiddle.net/7fh68sb5/2/
关于javascript - 检测悬停在上方的 svg 坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32374955/