On click svg image path get path id?

2019-08-10 02:24发布

站内问答 / jQuery
1609 3 5

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>

3条回答
仙女界的扛把子
2楼-- · 2019-08-10 02:26

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.

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-08-10 02:39

Try to use the object for event triggering:

$(document).ready(function(){
        $('object').on("click", function(){
            alert($(this).attr('id'));
        });
 });
查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2019-08-10 02:50

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)