attach events to SVG paths

Question

I have a SVG map in my html with the <svg> tag. and I want to attach events so I can click them and trigger some events. I know I can attach click event using jQuery on polygon elements. But some areas in this map are made using paths and I'd like to trigger some events when I click inside the paths, not on the paths.

What's the way to do that? Using jQuery is preferred.

Answer 1

If you fill a <path> then clicking inside it (on the fill) will trigger the event handler:

Demo: http://jsfiddle.net/TmsrP/1/

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

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

You can choose to explicitly fill the path with the color transparent and mouse events will still be caught:

Demo: http://jsfiddle.net/TmsrP/2/

<path fill="transparent" … />