SVGシェイプの完全な境界領域をクリック可能にする

Question

私は、クリック可能な必要があるいくつかのピンがあるSVGマップを持っています。さらに、小さなアニメーションは、ユーザがデスクトップのピンの1つの上を移動するたびにアクティブになります。私の問題は、ピンが中央に少し「穴」を持つので、問題のあるイベントを受け取るのは実際の形状だけなので、ユーザーがピンの中央をたどったりクリックしたりすると何も起きません。ユーザーがシェイプの境界ボックスをクリックまたは移動するたびに、つまりイベントのトリガーを行う方法はありますか？要素がインスペクタで表示されているときにその領域がアウトラインになっているか、または実際のSVGを非表示のボックスや他の「ハッキー」ソリューションで拡張する必要がありますか？

Answer 1

はい、不可視の矩形を追加する必要がありますその矩形をpointer-events: fillに設定して、不可視であってもクリックイベントが発生するようにします。