我之前已经在这里询问过有关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 + ")");
}
Run Code Online (Sandbox Code Playgroud)
问题在于将鼠标单击坐标转换为用户空间中的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属性都与我的程序中的属性相同.