SVG捕捉鼠标坐标

我知道关于svg鼠标坐标的问题已经在这里提出过了，但是我对目前的行为感到困惑，并且没有一个线程似乎可以解决它。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空间中进一步向右移动，坐标变得越来越倾斜。为了以简单的方式测试这个，我在（100,500），（500,500），（1000,500）和（1000,200）的全局svg空间中放置了三个矩形。使用简单的日志记录功能，我接收的坐标是（98,473），（487,470），（969,471），（969,190）。正如你可以看到鼠标沿着x或y轴进一步移动，它变得越不准确。我试图在一个小提琴中使用捕获鼠标坐标的相同方法复制这个，但我无法在那里复制它...还有一件需要注意的事情可能很重要的事实是，当我记录svg文档时，宽度和高度设置为略小于视框值的值，即。给定“0 0 1400 700”的视图框值的1380宽度和676高度。无论如何，这里是小提琴，所有的svg属性都和我的程序中一样。

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

来源

2012-10-05 Smerk

看来问题是直接在浏览器中打开SVG。相反，我通过嵌入标签将其嵌入到HTML页面中，并且效果很好。我不确定为什么这会影响我的鼠标坐标精度，但解决方案就是解决方案。

来源

2012-10-12 17:30:16 Smerk

SVG捕捉鼠标坐标

回答

相关问题