使用svg-pan-zoom缩放后的光标位置

Question

我正在使用ariutta svg-pan-zoom库。我有一个viewBox="0 0 1052.3622 744.09448"的SVG文件 以及width=649和heigth=525,59的div容器。 我试图在我的SVG中获取光标位置。

我的代码：

var divX = ev.pageX - this.offsetLeft;
var divY = ev.pageY - this.offsetTop;

var currentPan = panZoom.getPan();
var realZoom = panZoom.getSizes().realZoom;
var panZoomHeight = panZoom.getSizes().height;
var viewboxHeight = panZoom.getSizes().viewBox.height;

var x = (divX - currentPan.x) / realZoom;
var y = ((panZoomHeight - divY - ((panZoomHeight-(viewboxHeight*realZoom))/2) + currentPan.y) / realZoom);

var zoom = panZoom.getZoom(); // only to explain my problem - I'm not using this value 

直到zoom等于1（默认缩放级别）才能正常工作。当zoom大于1时，y值是错误的（x是好的）。 例如：

1. 我点击了某个点，结果是x: 197.82463543913713, y: 616.3652582594272
2. 使用鼠标滚轮（zoom: 3.9562617313728334进行缩放，光标仍在屏幕上的同一点。）
3. 再次点击，结果为x: 197.82463192575807, y: 540.7407139122004

我一直在尝试多种代码组合，但没有什么效果好。我不知道该怎么做。我错过了一些明显的东西吗 有没有更好的解决方案来获得光标位置？

Answer 1

我是个白痴！我的代码的另一部分有一个错误。这就是为什么我认为zoom == 1的y值是正确的 - 实际上它不是。

这对我有用：

var y = (panZoomHeight - divY - (panZoomHeight-(viewboxHeight*realZoom)) + currentPan.y) / realZoom;