SVG：文档加载完成后运行脚本。

Question

我有一个SVG文档，我想在其中包含一个脚本（使用<script>标签）。在这个脚本中，我想设置一个函数，在文档加载完成并可供操作时调用。

如果我是在HTML和JQuery中做这个，我会使用$(document).ready(...)。我正在寻找同样的方法来在SVG文档中完成，但显然我不能以同样的方式使用JQuery。

总之，我要找的是像下面这样的东西：

test.svg：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <script type="text/ecmascript" xlink:href="myscript.js" />

    <!-- Rest of SVG body goes here -->
</svg>

myscript.js:

function init(evt) {
    var svgDocument = evt.target.ownerDocument;
    var svgRoot = svgDocument.documentElement;
    // Manipulate SVG DOM here
}

// --> Somehow attach init() function to onload event of SVG <--

我希望能在脚本中实现这一点，而不是依赖SVG定义中显式的onload="init()"。（我希望编写一个脚本，可能会被包含在多个SVG中，而它们无需了解脚本的工作原理。）

- FixMaker

Answer 1

这里有一个例子。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" onload='init(evt)'>
<script type="text/ecmascript">
function init(evt) {
var svgDocument = evt.target.ownerDocument;
var svgRoot = svgDocument.documentElement;
// Do whatever you like on svgRoot to manipulate your SVG DOM
}
</script>
</svg>

- Clafou

---

谢谢。这大致是我想要实现的。不过，我想做的是避免在<svg>标签中添加onload =“…”。我已经更新了原始问题以使其更清晰（希望如此！）。 - FixMaker

Answer 2

除了IE外，您可以在嵌入SVG的JS中使用标准DOM事件处理程序：

document.addEventListener('load', init);

对于IE浏览器，通常使用attachEvent或类似的方法，但我不确定IE（>=9）是否支持在SVG中使用此方法。

大多数情况下，SVG文件是独立的，因此DOMReady（也称为DOMContentLoaded）和load事件之间的差距不会太大（与HTML相比，需要加载几十个CSS文件和图像）。因此，使用load事件而不是DOMReady事件的区别（不幸的是，它尚未稳定地得到标准化），将是可以忽略的。除此之外，我从来没有尝试过，如果浏览器在SVG的DOM加载完成时是否会触发DOMReady事件。

- Boldewyn

Answer 3

也许你要找的是'onload'事件。在这里查看 相关内容。

- madhead

---

可能可以，但我正在寻找一种通过JavaScript钩入该事件的方法，从SVG内部运行（或者至少使用<script>标签从单独的文件中包含）。 - FixMaker

Answer 4

您可以尝试将脚本包含在svg文档的最后，这样您就不需要等待加载事件。但是，如果您在文档中引用任何外部文件并且它们在运行脚本时尚未加载，则可能会失败。

- Spadar Shut