我可以让 JavaScript 在使用 JavaScript 附加到 DOM 的 SVG 图像中执行吗？答案

【问题标题】：Can I get the JavaScript to execute in an SVG image that is appended to the DOM with JavaScript [duplicate]我可以让 JavaScript 在使用 JavaScript 附加到 DOM 的 SVG 图像中执行吗？
【发布时间】：2017-06-09 00:24:34
【问题描述】：

我想将 SVG 图像附加到我的 HTML 并执行 SVG 中的 JavaScript。

假设我想获取 this image 并将其放入我的 HTML 中，如下所示：

<!DOCTYPE html>
<html>

<head>
    <title>Test SVG</title>
    <script type="text/javascript">
        var listener = function(response) {
            document.getElementById('output').innerHTML = this.responseText;
        };
        var request = new XMLHttpRequest();
        request.addEventListener('load', listener);
        request.open('GET', 'https://cdn.rawgit.com/jormaturkenburg/42bf377e390839b6fd75745403fface7/raw/4c851457ae03f0b416d122b7538bc6d9dc794954/circle.svg');
        request.send();
    </script>
</head>
<body>
    <div>Hello world!</div>
    <div id="output">
        Inner HTML
    </div>
</body>
</html>

Fiddle

SVG 图像的脚本标签中有一个 console.log() 和一个 alert()。这些在查看图像时执行得很好，但在通过 JavaScript 将图像附加到 HTML 时就不行了。有没有办法做到这一点并让 JavaScript 执行？

如果我要嵌入图像，我知道它们会执行，但我需要用 JavaScript 内联它。

【问题讨论】：

@RobertLongson，JavaScript 位于 SVG 图像内的脚本标记中。我怎么去呢？如果您查看this image的来源。有一个功能测试。加载 SVG 后在页面中调用 test() 会给我一个错误。还有其他方法可以实现该功能吗？
这是我的问题。我怎么去呢？我尝试在全局范围内调用 test() 但这不起作用。在将其设置为 #output div 的 innerHTML 后，我可以访问 SVG 对象，但是接下来呢？
根据我将这个问题链接到的副本。

标签： javascript svg innerhtml inline-svg

【解决方案1】：

<body>    
<object id="svgholder" data="some.svg" type="image/svg+xml""></object>
</body>


var svgholder = $('body').find("object#svgholder");

svgholder.load("image/svg+xml", function() {
    alert("some svg loaded");
});

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！