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

Question

我正在尝试制作一个垂直可拖动的温度计型组件。用箭头按住圆形物体并上下拖动它随光标移动。使用普通的HTML / JS这很容易，但我似乎无法弄清楚如何使用鼠标移动svg片段。现在它向正确的方向移动，但它离光标不远。

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

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

P.S。 height标记中的<style>和$1在Safari和Chrome中运行良好，但在Firefox中无效。我不知道如何修复它，所以现在Firefox中的颜色​​条不会出现。

Answer 1

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

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

Answer 2

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

• 为了计算相对于页面的正确位置，你可以在svg elem上使用getBoundingRect（）方法，
• 为了计算正确的缩放比例，你可以做一些数学将高度与视箱高度相加并乘以cursor.y（或者你可以在变换中使用缩放）。