单击 svg 图像路径获取路径 id？

Question

我试图获取 svg 图像路径的 ID，但它不起作用，在 DOM 准备就绪时我已经在文档准备就绪时尝试过我也有 tried.How 我可以得到它 done.I 使用了来自这个 url http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg

的 svg 图像 (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

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

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

Answer 2

如果您将 svg 文档嵌入到 <object> 元素中，那么您必须在那里检查它的 contentDocument property and make the searches from the 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

的限制

Answer 3

这是因为您正在从文件中导入 svg。如果您在页面上包含 svg 标记，您的代码将起作用。

看到这个Fiddle

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

我确实在 Whosebug 上找到了解决这个问题的答案。您需要做的是将一个加载事件附加到 object，当它被触发时将在加载后附加您的点击事件。

参见 this 答案。

单击 svg 图像路径获取路径 id？

On click svg image path get path id?

jquery

svg

snap.svg