CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Rishi
Rishi

Reputation: 321

Add onclick to svg path by id

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

Upvotes: 6

Views: 12588

Answers (2)

Nyamiou The Galeanthrope
Nyamiou The Galeanthrope

Reputation: 1224

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

Upvotes: 7

Christophe
Christophe

Reputation: 28174

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.

Upvotes: 0

Related Questions