5

我目前正在学习和工作在 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选项时，任何人都可以指导我如何计算我的偏移位置。

感谢任何帮助和指导。

4

1 回答 1

11

如果您有一个 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 的用户坐标系中的鼠标位置。

于 2012-08-13T14:54:32.957 回答