Question

我试图得到一个svg图像路径的ID，但是它不起作用，在DOM准备好我已经尝试了文档就绪我也尝试过。我怎么能完成它。我使用了svg图像（NewTux.svg ）来自此网址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>

Answer 1

这是因为您要从文件导入svg。如果您在网页上添加了svg标记，那么您的代码就可以使用。

请参阅此Fiddle

我认为这是因为当您导入它时，页面上尚未加载svg标记，因此它无法将事件附加到path元素。

我确实在StackOverflow上找到了解决此问题的答案。您需要做的是将一个加载事件附加到object，一旦加载，它就会在点击事件发生时附加。

请参阅this回答。

Answer 2

尝试使用object进行事件触发：

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

Answer 3

如果您将svg doc嵌入到<object>元素中，那么您必须检查其contentDocument属性并从那里documentElement进行搜索。

我不太了解jQuery，但我认为它对svg非常蹩脚，而且我对其他图书馆也不太了解，但是这是vannila.js代码：

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

请注意，您必须等待对象加载了data并且您已被same-origin policy

限制

点击svg图片路径获取路径ID？

3 个答案: