添加视口时鼠标位置的变化

Question

我是一名正在学习和工作于JavaScript和SVG领域的新手。

我的情况如下：

我有一个包含SVG的div。

<div id "O_div">
  <svg>
     <line x1= "0" x2 = "0" y1 ="0" y2 ="0">
     </line>
  <svg>
</div>

现在我想知道鼠标相对于我的 div 的位置，所以我写了以下代码。

odiv = document.querySelector('#O_div');

XOffset = $(Odiv).position().left;
YOffset = $(Odiv).position().top;

   // And on my mouse move event 
            $('#O_div').mousemove(function(event) {
                var mouseX = event.clientX - XOffset;
                var mouseY = event.clientY - YOffset;
               // Here I am setting my line x and y coordinate equal mouseX and mouseY
               //So that line moves according to mouse move movement.           
            });

它正常运行。 但是，当我使用query resizable添加调整大小功能到我的div时，问题就出现了。为了调整大小我的svg，我添加了一个viewBox选项。现在我的svg看起来像这样。

<svg viewBox="0 0 450 154" preserveAspectRatio="xMinYMin meet">
</svg>

但现在我的鼠标坐标不正常，而且我的线离鼠标有点远，当我增加div大小时，它距离鼠标更远。 请问有没有人可以指导我如何计算偏移位置，当我在svg中使用视口选项时。 谢谢，任何帮助和指导将不胜感激。

- A_user

Answer 1

如果您有一个viewBox，则需要记住鼠标事件提供的值是在客户端坐标系中，而不是通过viewBox建立的坐标系。 这篇博客文章可能有助于解释一下这个问题，并且这里还有一个示例。

简而言之，要获取当前用户空间中的坐标，您需要执行以下操作：

var m = El.getScreenCTM();

// note: assumes the root is an <svg> element, replace 
// document.documentElement with your <svg> element.
var p = document.documentElement.createSVGPoint(); 

p.x = evt.clientX;
p.y = evt.clientY;
p = p.matrixTransform(m.inverse());

变量p现在将包含元素El中鼠标位置的用户坐标系。

- Erik Dahlström