SVG路徑命中測試

Question

我在檢測SVG路徑元素上的鼠標懸停事件時遇到問題。似乎路徑元素的strokeWidth越小，我在檢測鼠標懸停時的成功就越少。

此外，我使用jquery-svg插件來執行繪圖。

下面是嘗試檢測路徑元素上使用jQuery的鼠標懸停事件的小提琴。 Mouseover Fiddle

下面是一個嘗試通過將mousemove監聽器附加到svg來檢測，然後使用document.getElementFromPoint進行檢測的小竅門。 getElementFromPoint Fiddle

這些似乎都無法可靠地工作，特別是如果鼠標移動得很快。是否有可能使這些更敏感的更好地檢測鼠標懸停？或者更好的做法呢？

Answer 1

瀏覽器的工作方式，你不會連續獲取mouseover事件，但每次操作系統更新光標位置時都會得到一個事件。如果鼠標移動得很快，你會得到一個相隔幾個像素的事件。該文檔不是slide，而是跳轉。 Here's a jsfiddle顯示每個事件發生的位置。沒有任何事情可以爲光標的兩個連續位置之間的所有元素獲取mouseover事件。

您可以做一些不同的事情：記住mousemove事件的先前位置，計算該點與當前鼠標位置之間的線，並計算該線與文檔中所有其他形狀之間的所有交點。但是這將是資源密集型的，因爲沒有可用的API，你必須自己計算交叉點。有一個library，可以幫助你。