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建立的坐标系。 This blogpost可能有助于解释这一点，这里是example。

简而言之，要获取当前用户空间中的坐标，您需要做的是：

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的用户坐标系中的鼠标位置。

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

1 个答案: