Question

149

attach events to SVG paths

rated 0 times [ 153] [ 4] / answers: 1 / hits: 47334 / 12 Years ago, sat, july 28, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaredsages

Add To Favorites

Follow

Total Points: 273

Total Questions: 97

Total Answers: 105

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

jaredsages questions

1 Unexpected reserve word 'await'

Tue, Aug 17, 21, 00:00, 3 Years ago

1 React.JS App MODULE_NOT_FOUND error on 'npm start'

Sun, Jan 10, 21, 00:00, 3 Years ago

1 Next-Pwa not working on production server such as Nginx

Fri, Oct 23, 20, 00:00, 4 Years ago

1 How to call Vue instance in chrome console, if he created in a separated file

Mon, Aug 31, 20, 00:00, 4 Years ago

1 Record voice with recorder.js and upload it to python-flask server, but WAV file is broken

Mon, Feb 3, 20, 00:00, 4 Years ago

View All

answered 12 Years ago bradenc · Accepted Answer

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