javascript - SVG 捕获鼠标坐标

Question

我知道之前有人在这里问过关于 svg 鼠标坐标的问题，但我对我目前遇到的行为感到很困惑，似乎没有一个线程能完全解决它。

我用来捕捉坐标的方法:

var pt = svg.createSVGPoint();  // Created once for document

function alert_coords(evt) {
    pt.x = evt.clientX;
    pt.y = evt.clientY;

    // The cursor point, translated into svg coordinates
    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());
    console.log("(" + cursorpt.x + ", " + cursorpt.y + ")");
}

问题在于将鼠标点击坐标转换为用户空间中的 svg 坐标。我正在使用坐标在屏幕上拖动一个矩形，随着光标在 svg 空间中进一步向右移动，坐标变得越来越倾斜。为了以简单的方式对此进行测试，我在全局 svg 空间中放置了三个矩形，分别为 (100, 500)、(500, 500)、(1000, 500) 和 (1000, 200)。使用简单的日志记录功能，我收到的坐标(鼠标不精确加上或减去 5)是 (98, 473), (487, 470), (969, 471), (969, 190)。如您所见，鼠标沿着 x 或 y 轴移动得越远，它变得越不准确。我尝试使用与捕获鼠标坐标相同的方法在 fiddle 中复制它，但我不能在那里复制它......还有一件可能很重要的事情需要注意的是，当我记录 svg 文档时，宽度和高度设置为略小于视框值的值，即。给定视框值“0 0 1400 700”，宽度为 1380，高​​度为 676。无论如何，这是 fiddle ，所有 svg 属性都与它们在我的程序中相同。

http://jsfiddle.net/ASLma/11/

Answer 1

问题似乎是直接在浏览器中打开 svg。相反，我通过嵌入标签将它嵌入到 html 页面中，效果很好。我不确定为什么这对我的鼠标坐标精度很重要，但解决方案就是解决方案。