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上执行相同的计算。

如果有浏览器怪癖在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中获取鼠标坐标？

1 个答案: