在前端开发中，我们经常使用SVG来绘制图形和动画等。而让用户交互的一个重要部分就是捕获鼠标位置，以便根据其位置做出相应的响应。但是，当SVG被自动缩放时，计算鼠标位置可能变得困难。
本文将介绍如何在自动缩放的SVG内计算鼠标位置，并提供一些参考代码。
问题描述
我们可以通过getBoundingClientRect()方法获取SVG元素在文档中的位置和大小。然后我们可以使用以下代码计算鼠标相对于SVG的位置：
const rect = svg.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top;
这种方法对于非缩放的SVG非常有效，但是当SVG被自动缩放时，它将不再起作用。因为getBoundingClientRect()返回的是未缩放的元素的边界，而不是缩放后的实际边界。
例如，如果您有一个宽度为1000像素的SVG，但是由于视口宽度只有500像素，因此浏览器会自动将SVG缩小一半。如果您使用上面的代码来计算鼠标位置，则鼠标的x坐标将比实际位置少500个像素。
解决方案
要解决这个问题，我们需要将鼠标位置从文档坐标系转换为SVG坐标系。首先，我们需要获取SVG的缩放比例。可以通过以下方式计算：
const rect = svg.getBoundingClientRect(); const scaleX = svg.width / rect.width; const scaleY = svg.height / rect.height;
然后，我们可以使用以下代码将鼠标位置从文档坐标系转换为SVG坐标系：
const rect = svg.getBoundingClientRect(); const scaleX = svg.width / rect.width; const scaleY = svg.height / rect.height; const x = (event.clientX - rect.left) * scaleX; const y = (event.clientY - rect.top) * scaleY;
这里，我们将鼠标位置乘以缩放比例，以获得正确的坐标。
示例代码
下面是一个完整的示例代码，演示如何在自动缩放的SVG中捕获鼠标位置。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -------- ------ ---------- -----------
-------
---------- -
------ ----
------- - -----
-
--------
-------
------
---- ---------------
---- ---------------------------------- ------------ -------------
----- ----- ----- ------------ ------------ -------------
------- -------- -------- ------- -------------
------
------
--------
----- --- - ------------------------------
----- ---- - ----------------------------
----- ------ - --------- - -----------
----- ------ - ---------- - ------------
----- --------- - -------------------------------------
--------------------------------------- ----- -- -
----- - - -------------- - ---------- - -------
----- - - -------------- - --------- - -------
------------------ --------- ------ --------
---
---------
-------
-------在上面的示例中，我们创建了一个自动缩放的SVG，并在其内部绘制了一个圆形。然后，我们使用上述代码捕获鼠标位置，将其转换为SVG坐标系，并输出到控制台。
结论
本文介绍了如何在自动缩放的SVG中计算鼠标位置。我们使用getBoundingClientRect()方法获取SVG元素在文档中的位置和大小，并使用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27605