Question

我阻止了一个愚蠢的事情，我在点击后查找SVG坐标。但我的SVG可以缩放和移动。

我想这个例子会说得更多：

http://blockbuilder.org/Servuc/36931fc3950218df024d0aa7ff8c8d3c

我想要黑色圆圈下的坐标。重要：黑色圆圈只是一个位置指示，在我的情况下点击SVG上的某处。

我已经读过：D3 click coordinates after pan and zoom但它并没有帮助我。

编辑：我的意思是如果黑色圆圈在左边，我得到X和Y，我移动右边的黑色圆圈，我得到相同的X Y 有一个很好的编码日！

Answer 1

这很简单......

首先，你应该得到一些信息：

SVG.getScreenCTM（）
翻译 X 和 Y
缩放
客户点击坐标（d3.event.pageX和d3.event.pageY）

重要：使用 parseFloat ，而不是 parseInt ;）

function screenToSvg(x, y, translateX, translateY, scale) {
    var myScreenCTM = $("svg")[0].getScreenCTM();
    return {
        x : ( x - myScreenCTM.e - translateX ) / scale,
        y : ( y - myScreenCTM.f - translateY ) / scale
    }
}

要获得翻译和缩放值，请使用：/.*translate$(-?\d+(.\d+)?),(-?\d+(.\d+)?)$( scale$(-?\d+(.\d+)?)$)?/与$1 $3和$6。

平移和缩放后单击SVG坐标

1 个答案: