attach events to SVG paths

Question

I have a SVG map in my html with the tag. and I want to attach events so I can click them and trigger some events. I know I can attach click event u

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" … />