我試圖爲使用客戶端JavaScript的SVG文本元素實現衝突檢測。命中測試應檢查文本的任何字形是否與其他文本元素的任何字形重疊。由於getBBox和getExtentOfChar是準確的我需要一個自定義的解決方案。SVG文本點擊測試
我的第一種方法是獲取元素的每個座標/像素的顏色並手動執行命中測試，但這不起作用，因爲無法獲取座標的顏色。這將需要額外的畫布來獲得像素顏色 - >可怕的解決方法。
現在我正在考慮將文本或字形轉換爲多邊形進行命中測試。可能嗎？或者有任何其他的基於字形的命中測試的方法？
問候
至於基於像素的命中測試 - 如果切換到HTML5畫布，那麼這將成爲可能。幾個項目提供了從SVG到畫布的簡單過渡，例如fabric.js。 See a comparison table here。
至於基於多邊形的方法 - 可能，但很難。您可以使用某種工具（例如Inkscape的文本到路徑）將文本或字形轉換爲多邊形（路徑）。然後會有計算。爲任何文本製作一個通用的解決方案將需要大量的工作。但是，如果文本沒有更改，那麼使用路徑手動繪製文本可能是一個快速而骯髒的解決方案。
你真的進入了一個痛苦和跨瀏覽器問題的世界。我最終只做了自定義的字體路徑渲染，使得文本長度可靠且一致。我甚至不想考慮雕文。
例如，一個問題是firefox（至少3.6）和iirc也有一些版本的opera在縮放時會有一些舍入誤差，所以當您縮放含有文本的父元素並按該刻度的倒數縮放文本時，那麼字母間距與沒有任何比例的情況相比會略有不同。 （因爲每個字母都必須以偶數或類似的數字開頭，所以問題可以通過將高檔和低檔乘以10000來解決，但這是另一個故事）
不幸的是，使用路徑與文本相比的性能影響相當大顯。如果您的畫布執行任何形式的動畫平移或縮放，則應在動畫期間切換爲純文本元素，並且一旦靜態，請打開路徑渲染以確保準確性。
幸運地，將svg-fonts轉換爲路徑非常簡單，它是明文並使用與路徑元素完全相同的格式。 （不過要注意字體嵌入許可證！還要記住文件大小，因爲你不能使用用戶系統的字體）