使用document.elementFromPoint獲取附近路徑

對於我的網站，我希望用戶能夠點擊各種svg元素。使用document.elementFromPoint獲取附近路徑

我編寫了一個快速的函數，讓用戶點擊封閉的形狀。我基本上只是對他們運行document.elementFromPoint(x, y)。這適用於任何封閉的形狀，因爲它們有可點擊的區域。然而，打開路徑很難點擊，因爲它們只有1-2像素大小。

我希望允許用戶通過點擊'足夠接近'來選擇它們，例如，如果點擊距離路徑10個或更少的像素，路徑將被選擇。我可以爲此編寫一個數學算法（使用光線投射，例如只能出10個像素，或將點轉化爲10px半徑的圓並檢查與路徑的交點），但我的直覺告訴我必須有更簡單的方法，也許通過CSS。

我一直在想的一個想法是，如果這條路徑的筆畫厚度爲10像素厚，但只有1個像素厚（但有一個「填充」可用於路徑而不是邊界框）。我也看過pointer-events，但除了邊界框（我不想使用它來避免選擇其他形狀），我沒有看到任何有用的設置。有沒有什麼我可以利用JavaScript或CSS，可以幫助我做到這一點，而不必爲自己的路徑做數學運算（因爲它可能會讓立方貝塞爾變醜）等等。

我還應該提到，這是一個HTML5應用程序，所以我不在乎向後兼容性。

來源

2014-03-07 Alexander Tsepkov

如果路徑沒有筆畫，那麼您可以創建一個不可見的筆畫（stroke-opacity =「0」）並使用pointer-events =「all」來爲該形狀提供一個擴展命中區域。

如果路徑確實有筆畫，那麼您需要在具有相同座標但較大筆畫寬度的可見路徑頂部創建第二個不可見路徑。然後你可以使用pointer-events =「all」使這個不可見的路徑成爲命中目標，如果命中，你在事件處理器中作出反應，就好像可見形狀被擊中一樣。

來源

2014-03-07 09:52:54

工作得很好，我把兩個路徑放在一個'symbol'元素中，我通過'use'引用。這樣，兩條路徑都自動成爲相同形狀的一部分。 –

Robert Longson介紹瞭如何做到這一點，但我想添加一些細節。

首先，如果您不想要，您不需要複製或創建新的幾何圖形。您也可以使用< use>元素。即使在其他不可見元素被徘徊時，您也可以使用一些CSS爲不同的外觀賦予形狀。

<style> 
    g { fill: #ddd; stroke: black; pointer-events: none; } 
    use { pointer-events: all; stroke-width: 40; fill: none; stroke-opacity: 0; } 
    use:hover + * { fill: cornflowerblue; } 
<g> 
    <use xlink:href="#c"/> 
    <circle id="c" cx="50" cy="60" r="20"/> 
</g>

請參閱live example。

來源

2014-03-07 12:02:46

使用document.elementFromPoint獲取附近路徑

回答

相關問題