如何获取svg和鼠标光标位置正确

Question

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

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

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

附： <style>标记中的width和height可在Safari和Chrome中正常工作，但在Firefox中无法正常工作。我不知道如何解决这个问题，所以颜色棒现在不会显示在Firefox中。

Answer 1

您正在使用evt.clientX和evt.clientY，它给出了页面上鼠标事件的坐标。

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

Answer 2

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

• 相对正确的位置计算到页面，您可以使用getBoundingRect（）方法对SVG ELEM，
• 计算正确的比例，你可以做视框高度一些数学分高和乘上光标。 y（或者你可以在转换中使用scale）。