javascript - SVGパスにイベントを添付する

Question

htmlに<svg>タグ付きのSVGマップがあります。イベントを添付して、クリックしていくつかのイベントをトリガーできるようにします。ポリゴン要素にjQueryを使用してクリックイベントをアタッチできることはわかっています。ただし、このマップの一部の領域はパスを使用して作成されているため、パスではなくパスの内側をクリックすると、いくつかのイベントがトリガーされます。

それを行う方法は何ですか？jQueryを使用することをお勧めします。

Answer 1

その中 (塗りつぶし上) をクリックすると、イベント ハンドラーがトリガーされますfill。<path>

デモ: http://jsfiddle.net/TmsrP/1/

<path id="sauce" fill="#f00" … />    

$('#sauce').on('click',function(){ … });

パスを色で明示的に塗りつぶすことを選択できtransparent、マウス イベントは引き続きキャッチされます。

デモ: http://jsfiddle.net/TmsrP/2/

<path fill="transparent" … />