私は、クライアント側JavaScriptを使用してSVGテキスト要素の衝突検出を実装しようとしています。ヒットテストでは、テキストのグリフが他のテキスト要素のグリフと重なっているかどうかを確認する必要があります。 getBBoxとgetExtentOfCharは正確なものではないので、私はカスタムソリューションが必要です。SVGテキストヒットテスト
私の最初のアプローチは、素子の各座標/ピクセルの色を取得し、手動でヒットテストを実行することであったが、座標の色を得ることができないので、これは動作しません。それはピクセルの色を得るために追加のキャンバスを必要とする - >ひどい回避策。
今私はヒットテストのためにテキストまたはグリフをポリゴンに変換することを考えています。出来ますか？あるいは、グリフベースのヒットテストのための誰かのアプローチがありますか？
よろしく
ピクセルベースのヒットテスト用として- あなたはHTML5キャンバスに切り替えた場合、これが可能になります。 SVGからCanvasへの簡単な移行が可能なプロジェクトがいくつかあります。 fabric.js。 See a comparison table here。
ポリゴンベースのアプローチは可能ですが難しいです。テキストやグリフをポリゴン（パス）に変換するには、いくつかのツール（Inkscapeのtext-to-pathなど）を使用します。そして計算があります。テキストの一般的な解決策を作るには、多くの作業が必要です。ただし、テキストが変更されない場合、パスを使用してテキストを手動で描画することは、迅速かつ厄介な解決策になります。
あなたは本当に痛みやクロスブラウザの問題の世界に入っています。私は合計テキストの長さを信頼性と一貫性を持たせるためにのみフォントのカスタムパスレンダリングを行ってしまいました。私はグリフヒットを考えたくはありません。
firefox（少なくとも3.6）とiircには、テキストを保持する親要素をスケールし、そのスケールの逆数でテキストをスケーリングするときにスケーリングするときにオペラの一部のバージョンで丸め誤差が発生するという問題があります文字間隔は、スケールがない場合と比べてわずかに異なります。 （それぞれの文字は偶数などで始める必要があるため、10000のような高級と小規模の両方を乗算することで問題を解決できますが、別の話です）
テキストと比較してパスを使用することによるパフォーマンスへの影響は、目立つキャンバスがアニメーションパンまたはズームのいずれかのフォームを実行する場合は、アニメーション中に純粋なテキストエレメントに切り替えて、静的に切り替える必要があります。正確にはパスレンダリングをオンにします。 FortunallyパスにSVG-フォントを変換
は、平文とパス要素とまったく同じフォーマットを使用している、非常に容易です。 （ただし、フォント埋め込み・ライセンスの用心！あなたは、ユーザーのシステムからフォントを使用することはできませんとしても念頭に置いて、ファイルサイズを維持し、）