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

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

Answer 1

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

SVG捕获鼠标坐标

1 个答案: