web-dev-qa-db-ja.com

SVGパスにイベントをアタッチする

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

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

23
Gnijuohz

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

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

<path id="sauce" fill="#f00" … />    
$('#sauce').on('click',function(){ … });

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

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

<path fill="transparent" … />
26
Phrogz