如何使 svg 和鼠标光标位置正确

How to get svg and mouse cursor position correct

本文关键字：位置光标鼠标何使 svg 更新时间：2023-09-26

我正在尝试制作一个垂直可拖动的温度计类型的组件。你用箭头按住圆圈的东西，上下拖动，它随着光标移动。使用普通的 HTML/JS 这很容易，但我似乎无法弄清楚如何让 svg 部分随着鼠标移动。现在它朝着正确的方向移动，但它远离光标。

我已经在 Stackoverflow 上阅读了大约十几个答案，它们似乎都使用了我链接中的相同代码，但它仍然关闭。我完全不确定我做错了什么。

演示：http://jsbin.com/qoyozej/3/edit?html,js,output

p.s. <style>标签中的width和height在 Safari 和 Chrome 中运行良好，但在 Firefox 中则不然。我还不确定如何解决这个问题，所以颜色条现在不会出现在 Firefox 中。

您正在使用 evt.clientX 和 evt.clientY ，它为您提供页面上鼠标事件的坐标。

在

进行变换之前，您需要从坐标中减去 SVG 的（左上角）位置。

除了计算元素在页面上的相对位置（如保罗的回答所示），您还需要考虑 Viewbox 如何影响您的图形;