如何從左上角獲取可滾動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/