如何从左上角获取可滚动 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/