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

Change in mouse position when viewbox is added

本文关键字：鼠标 位置 视图 添加      更新时间：2024-05-10

我目前正在学习和使用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.           
            });

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

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

但现在我的鼠标坐标工作不好，我的线离鼠标有点远，当我增加div大小时，它离鼠标更远。当我的svg中有一个viewbox选项时，有人能指导我如何计算偏移位置吗。

感谢您的帮助和指导，我们将不胜感激。

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

相关文章：