添加视图框时鼠标位置的更改

Question

我目前正在学习和使用JavaScript和SVG,我是新手.这是我的情景

我有一个div里面有一个SVG.

<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.           
            });

它工作正常.但是当我使用查询resizable向我的div添加调整大小功能时出现问题.为了调整我的svg大小,我在其中添加了一个viewBox选项.现在我的svg看起来像这样

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

但是现在我的鼠标坐标工作不正常,我的线距离我的鼠标稍微远一点,当我增加div大小时它离我的鼠标更远.当我在我的svg中有一个viewbox选项时,任何人都可以指导我如何计算我的偏移位置.

感谢任何帮助和指导将不胜感激.

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现在将包含元素E1的用户坐标系中的鼠标位置.