javascript - 如何从左上角获取可滚动 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 保留其自然宽度和高度并将其放置在 <div> 中有{ overflow: scroll }并对 DIV 进行相同的计算。

如果阅读 scrollLeft 时出现浏览器异常，这应该可以工作。/scrollTop SVG 元素上的属性(我还没有测试看看是否是这种情况)。

更新:您可以使用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/