如何獲取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）。