Menu
Using this Stackoverflow question and the first answer, I was able to convert an SVG image to inline svg on document ready. I can also reference its path' elements from CSS to add a hover stroke.
The next thing I am trying to accomplish is add onclick to each path without having to add it to the svg file itself. I assumed since the CSS can identify each path's class, I should also be able to identify each path's ID in javascript as well, but I am having trouble figuring out how. Here's my code:
<body>
<div id="mapSideBar" class="left">
</div>
<div id="mapMain" class="left">
<img id = "mapImg" src="canada2.svg" class="logo" />
</div>
</body>
I have the function mentioned in the link above to convert it to inline SVG and my paths have ids - path1, path2, path3 and path4. I tried to add the following to the jQuery(document).ready() function:
var $paths = jQuery(document).find('path');
$paths.each(function() {
(this).click(onImgClick((this).id));
});
just to see if I could get a handle on each path, and I cannot. Is there something I am missing, or is there even a way to assign onclick event handlers to each path?
Thank you, Rishi
589
The onclick attribute specifies some script to run when the element is clicked. You can use this attribute with the following SVG elements: <a> <altGlyph>
The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. This is as easy as wrapping the target with an <a> tag, just as you would a nested html element. Your <a> tag can surround a simple shape or more complex paths. It can surround a group of SVG elements or just one.
SVG Path - <path> The <path> element is used to define a path. The following commands are available for path data: M = moveto. L = lineto.
Here is a working solution : JSFiddle
HTML :
<img class="svg" src="http://upload.wikimedia.org/wikipedia/en/e/e5/My_Little_Pony_Friendship_is_Magic_logo.svg"/>
CSS :
svg path:hover {
fill: red !important;
}
JavaScript :
/*
* Replace all SVG images with inline SVG
*/
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
// Add an handler
jQuery('path').each(function() {
jQuery(this).click(function() {alert(jQuery(this).attr('id'));});
});
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
