Question

I’m trying to attach a hover event handler to a path within an embedded svg using jquery.

The embed code in the html looks like this:

<embed id="theSVG" src="thesvg.svg" type="image/svg+xml" width="2000" height="1280" />

I can make it work if I do not embed the svg, but put it into the html inline, then use the following javascript, linked to from the html file:

$('path').hover(
function () {
//do something
};
}, 
function () {
//do something else
};
}
);

But I do not know how to reference the path within the embedded svg via jquery.

Thanks,

Fb

Answer 1

Most probably you would need svg plugin for jQuery to access svg embedded code. Here’s the example of attaching events to paths in svg using jQuery SVG.

In general it looks like this:

var svg = $('#svg_container').svg('get');
$("#path_id", svg.root()).bind('click', function() {
    alert('path clicked');
})