17

我知道有关 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 轴移动得越远，它变得越不准确。我尝试使用与捕获鼠标坐标相同的方法在小提琴中复制它，但我无法在那里复制它...... 另一件可能很重要的事情是，当我记录 svg 文档时，宽度和高度设置为略小于视图框值的值，即。给定视图框值为“0 0 1400 700”的情况下，宽度为 1380，高​​度为 676。无论如何，这是小提琴，所有 svg 属性都与我的程序中的相同。

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

4

1 回答 1

9

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

于 2012-10-12T17:30:16.147 回答