CODEWITHSUNDEEP
jquerysvgsnap.svg
Dileep
Dileep

Reputation: 515

On click svg image path get path id?

I tried to get an id of svg image path ,but it's not working ,on DOM ready i have tried it on document ready also i have tried.How can i get it done.I have used svg image (NewTux.svg) from this url http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="main_wrapper">
    <object type="image/svg+xml" data="NewTux.svg">Your browser does not support SVG</object>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://oss.maxcdn.com/libs/snapsvg/0.1.0/snap.svg-min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('path').click(function(){
            alert($(this).attr('id'));
        });
    });

    /*$(window).load(function(){
        $('path').click(function(){
            alert($(this).attr('id'));
        });
    });*/

</script>

Upvotes: 1

Views: 9003

Answers (3)

Kaiido
Kaiido

Reputation: 136756

If you embed your svg doc into an <object> element, then you have to check for its contentDocument property and make the searches from the documentElement there.

I don't know well jQuery, but I think it's quite lame about svg, and I don't know too much either about other libraries, but here is vannila.js code : 

document.querySelector('object').addEventListener('load',function(){
    var p = this.contentDocument.documentElement.querySelectorAll('path');
    for(i=0;i<p.length;i++){
     p[i].addEventListener('click', function(){ 
          alert("Hello my name is "+this.id+"…")
        });
    }
});

▶︎ Show Live Code

Note that you'll have to wait for the object has loaded its data and that you're restricted by the same-origin policy

Upvotes: 1

zgood
zgood

Reputation: 12581

It's because you are importing the svg from a file. If you include the svg markup on your page your code will work.

See this Fiddle

I think this is because when you import it the svg markup isn't loaded on the page yet so it cannot attach events to the path elements.

I did find a answer on StackOverflow that does address this. What you have to do is attach a load event to the object that when fired will attached your click events once it has been loaded.

See this answer.

Upvotes: 2

Bud Damyanov
Bud Damyanov

Reputation: 31839

Try to use the object for event triggering:

$(document).ready(function(){
        $('object').on("click", function(){
            alert($(this).attr('id'));
        });
 });

Upvotes: 0

Related Questions