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

Question

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

不使用JQuery，如何从svg的左上角获取鼠标坐标？左上角是指左上角，包括 svg 的已滚出区域。（如果我在 svg 中滚动到最右边，我应该得到一个高 x 值，因为该点在水平方向上远离 actual 左侧 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/

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

How to get mouse coordinates inside a scrollable div or svg from the top left corner?

javascript

html

svg