SVGアークで塗りつぶしに反応しない

Question

私はDatamaps.jsでラップされたD3.jsを使用して、国間の航空路ルートを示す地図を作成しています。これまで私は地図を作成し、SVGの形で円弧を描き、カスタムプラグイン機能を追加してマウスの上にマウスを置いたときに反応するようにしました。

唯一の問題は、ホバー機能が弧の内側だけでなく、国境を越えたとき、私のマウスにトリガされていることである。

When my cursor is where the arrow is, the hover bar is triggered.

私はそのようにホバーバーこれを変更したいのですが私が実際の円弧のマウスを動かすときにのみトリガされます。 SVGをインスタンス化する際にこれを修正する必要があると思いますが、データマップを使用して変更することができれば、それはさらに優れています。

どうすればこの可能性がありますかを教えてください。

Answer 1

あなたのアークSVGに関連付けられたポインタイベントを変更することで、これを簡単にCSSで解決できます。あなたのSVGパス要素を仮定すると、問題を修正する必要があり、あなたのCSSに以下のコード行を追加し、そのような「データマップ・アーク」としてクラスを持っています

.datamaps-arc { 
    pointer-events:visibleStroke; 
} 

SVGs hereのためのポインタのイベントのターゲットを操作する方法については、こちらをご覧ください。