如何从左上角获取可滚动div或svg中的鼠标坐标？

Question

我有一个可滚动的svg元素（它的宽度和高度是恒定的，但实际上尺寸较大，因此由于我设置了overflow: scroll;而获得了滚动条）。 svg元素与其他内容一起位于body 。 body也可以滚动。

不使用JQuery，如何从svg左上角获取鼠标坐标？ 左上角是指包括已滚动出的svg区域的左上角。 （如果我在svg滚动到最右边，我应该得到一个较高的x值，因为无论它如何滚动，该点在水平方向上都远离svg的实际左侧）。

这是我的尝试：

return new Vector(event.pageX - svg.offsetLeft + svg.scrollLeft,
      event.pageY - svg.offsetTop + svg.scrollTop);

没用 scrollLeft和scrollTop始终为0。

Answer 1

尝试将SVG保留其自然宽度和高度，并将其放在具有{ overflow: scroll }的<div> ，并对DIV进行相同的计算。

如果浏览器在读取SVG元素上的scrollLeft / scrollTop属性时有问题，那应该可以工作（我还没有测试过是否可以）。

更新：您可以像这样使用getBoundingClientRect()

 var rect = container.getBoundingClientRect();
 var x = e.clientX + container.scrollLeft - rect.left;
 var y = e.clientY + container.scrollTop - rect.top;

实时示例： http ： //jsfiddle.net/aag5fd39/1/