我正在尝试制作一个垂直可拖动温度计类型的组件。您按住带有箭头的圆形物体并上下拖动,它会随着光标移动。使用普通的 HTML/JS 这很容易,但我似乎无法弄清楚如何让 svg block 随鼠标移动。现在它朝着正确的方向移动,但距离光标还很远。
我在 Stackoverflow 上读到了大约十几个关于此问题的答案,它们似乎都使用了我在链接中的相同代码,但它仍然处于关闭状态。我根本不确定我做错了什么。
演示: http://jsbin.com/qoyozej/3/edit?html,js,output
附: width
和height
在 <style>
标签在 Safari 和 Chrome 中工作正常,但在 Firefox 中不行。我还不知道如何解决这个问题,所以颜色条现在不会显示在 Firefox 中。
最佳答案
您正在使用 evt.clientX
和 evt.clientY
,它们为您提供鼠标事件在页面上的坐标。
在进行转换之前,您需要从坐标中减去 SVG 的(左上角)位置。
关于javascript - 如何使 svg 和鼠标光标位置正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35859318/