SVG 捕获鼠标坐标答案

【问题标题】：SVG Capturing Mouse CoordinatesSVG 捕获鼠标坐标
【发布时间】：2012-09-26 23:30:55
【问题描述】：

我知道有关 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/

【问题讨论】：

标签： javascript svg

【解决方案1】：

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

【讨论】：