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 acplish 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
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 acplish 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
Share Improve this question edited May 23, 2017 at 12:25 CommunityBot 11 silver badge asked Aug 26, 2014 at 20:32 RishiRishi 3212 gold badges6 silver badges19 bronze badges 4- Can you show a little more of the HTML? – Slippery Pete Commented Aug 26, 2014 at 20:38
- Any reason you're not just putting the svg tag into the html document? (w3schools./html/html5_svg.asp) – thebjorn Commented Aug 26, 2014 at 20:46
- @SlipperyPete, the relevant HTML is shown because the jQuery function takes care of converting the SVG image to inline. Essentially, there is one div on the page which I have shown in the edited post. – Rishi Commented Aug 26, 2014 at 21:07
- @thebjorn, I do not own/create the image. It is retrieved from a data source and I only dictate the IDs of the paths. I would have to change code to account for a slightly modified, albeit identically functioning, image – Rishi Commented Aug 26, 2014 at 21:07
2 Answers
Reset to default 7Here is a working solution : JSFiddle
HTML :
<img class="svg" src="http://upload.wikimedia/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
$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'));});
});
});
});
jQuery(document).ready() is not enough to ensure that your inline svg has been correctly loaded.
To validate if this is the actual issue, add a timeout to your function and see if it works better.
Eventually, what you'll probably need to do is add a callback to the function that does the inline svg conversion.