Add onclick to svg path by id

Question

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

Any reason you're not just putting the svg tag into the html document? (http://www.w3schools.com/html/html5_svg.asp) — thebjorn, Aug 26 '14 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, Aug 26 '14 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, Aug 26 '14 at 21:07

Nyamiou The Galeanthrope · Accepted Answer · 2020-05-27T15:17:58.437

7

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'));});                       
        });
    });
});

edited May 27 '20 at 15:17

answered Aug 26 '14 at 21:48

Nyamiou The Galeanthrope

1,178
9
23

1

Thanks! Now on to learning the difference between $(..) and jQuery(..) – Rishi Aug 27 '14 at 14:48
1

There is no difference at all, $(..) is an alias to jQuery(..). – Nyamiou The Galeanthrope Aug 27 '14 at 17:12
Weird. $('path') didn't return an array of paths, but jQuery('path') in your solution does. That made me question the difference between the two. – Rishi Aug 27 '14 at 19:55
1

Either you have another JavaScript framework using $(..) or you called $('path') after jQuery.get(...) and not in the callback function and so because jQuery.get(...) is asynchronous it was called before any "path" was actually there. – Nyamiou The Galeanthrope Aug 28 '14 at 12:17
Here is the same [JSFiddle](http://jsfiddle.net/3jbumc07/15/) using $(..) instead of jQuery(..). – Nyamiou The Galeanthrope Aug 28 '14 at 12:22
great answer! perfect – guilhermecgs Feb 17 '17 at 12:57

score 0 · Answer 2 · answered Aug 26 '14 at 21:21

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.

Add onclick to svg path by id

2 Answers2