On click svg image path get path id?

Question

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>

Are you sure that your SVG image contains actually `path` elements inside of it? As you know, the SVG graphic is in fact an XML text file, open it and check the contents with simple text editor. — Bud Damyanov, Mar 19 '15 at 14:25
possible duplicate of [How to access SVG elements with Javascript](http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript) — Kaiido, Mar 19 '15 at 16:24

score 2 · Accepted Answer · edited May 23 '17 at 12:19

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.

Kaiido · Answer 2 · 2015-03-19T15:21:04.283

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

score 0 · Answer 3 · answered Mar 19 '15 at 14:44

0

Try to use the object for event triggering:

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

answered Mar 19 '15 at 14:44

Bud Damyanov

30,171
6
44
52

On click svg image path get path id?

3 Answers3

Linked