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文档时，宽度和高度设置为略小于视口值的值，例如，宽度为1380，高度为676，给定视口值为"0 0 1400 700"。无论如何，这是fiddle，所有的svg属性都与我的程序中的属性相同。

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

- Smerk

Answer 1

看起来问题是直接在浏览器中打开svg文件。相反，我通过嵌入标签将其嵌入到html页面中，并且它运行良好。我不确定为什么这会影响我的鼠标坐标精度，但解决方案就是解决方案。

- Smerk