Javascript 如何获得svg和鼠标光标的正确位置

我想做一个垂直的可拖动的温度计类型的组件。你用箭头抓住圆圈，上下拖动，它会随着光标移动。对于普通的HTML/JS，这很容易，但我似乎不知道如何使用鼠标移动svg块。现在，它朝着正确的方向移动，但它远离光标

我已经在Stackoverflow上读了十几个答案，它们似乎都使用了我在链接中看到的相同代码，但它仍然处于关闭状态。我根本不知道我做错了什么

演示：

---

p、 在Safari和Chrome中，

标签中的

宽度和
高度可以正常工作，但在Firefox中不行。我还不知道如何解决这个问题，这样颜色栏现在就不会出现在Firefox中。
您使用的是
evt.clientX
和
evt.clientY
，这会为您提供页面上鼠标事件的坐标

在进行转换之前，需要从坐标中减去SVG的（左上）位置。
您使用的是
evt.clientX
和
evt.clientY
，这将为您提供页面上鼠标事件的坐标

您需要在转换之前从CORDS中减去SVG的左上角位置。
< P>除了计算元素在页面上的相对位置（如保罗的答案建议），还需要考虑VIEWBOX如何影响您的图形；p>

要计算相对于页面的正确位置，可以在svg元素上使用getBoundingRect（）方法
为了计算正确的缩放比例，您可以将高度除以viewbox高度，然后将其乘以cursor.y（或者在变换中使用scale）
 
除了计算元素在页面上的相对位置（如保罗的答案所建议的）之外，还需要考虑VIEWBOX对图形的影响；p>

要计算相对于页面的正确位置，可以在svg元素上使用getBoundingRect（）方法
为了计算正确的缩放比例，您可以将高度除以viewbox高度，然后将其乘以cursor.y（或者在变换中使用scale）