在平移和缩放后单击SVG坐标

SVG coordinates on click after pan and zooming

本文关键字：单击 SVG 坐标 缩放      更新时间：2023-09-26

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

我想这个例子会讲得更多:

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

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

我读过:D3点击坐标后平移和缩放，但它没有帮助我。

编辑:我的意思是如果黑色圆圈在左边，我得到X和Y，我把黑色圆圈移到右边，我得到同样的X和Y祝你编码愉快!

很简单…

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

  • SVG.getScreenCTM ()
  • 翻译X和Y
  • 客户端点击坐标(d3.event.pageX和d3.event.pageY)
重要

:使用 parseFloat ,不是方法;) 

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。

相关文章：