javascript - 有没有办法检查 SVG 是否已创建？

Question

我面临一个问题，我必须检查所有 svgs 元素(一页上大约 15 个)是否是由图表插件创建的。我不想侵入该代码，因为当插件更新时它可能无法工作。我想在 jQuery 中执行此操作(或在必要时使用纯 JavaScript)

所以我基本上想做点什么

$("svg").bind("load", function() {
    alert('svg has loaded');
});

但上面似乎不起作用。如果我理解正确的话，SVG 不是实际 dom 的一部分，那么这就是问题所在。有没有办法检查 SVG 是否已创建？

dom 看起来像这样:

<div id="visualizer-100">
<div id="visualizer-101">
<div id="visualizer-102">

当我查看 firebug 或类似内容时，我会看到如下内容:

<div id="visualizer-100">
    <div>
        <div> 
            <svg with all its its attributes...>
        </div>
    </div>
</div>

我想检查 SVG 是否“存在”的原因是我想这样做:

var container = document.getElementById('visualizer-100');
var svgText = container.querySelector('svg').outerHTML;

如果未创建 SVG，则 svgText 为 null。

Answer 1

尝试监听那些SVG的父元素然后监听目标负载:

parentElement.bind('DOMNodeInserted',function(event){ 
     alert(event.target + 'inserted');
});

fJSiddle:http://jsfiddle.net/0532h5ey/

对于加载的元素，您应该以内部 SVG 节点为目标。