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

Question

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

我在 Stackoverflow 上读到了大约十几个关于此问题的答案，它们似乎都使用了我在链接中的相同代码，但它仍然处于关闭状态。我根本不确定我做错了什么。

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

附: width和height在 <style>标签在 Safari 和 Chrome 中工作正常，但在 Firefox 中不行。我还不知道如何解决这个问题，所以颜色条现在不会显示在 Firefox 中。

Answer 1

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

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