如何检查嵌入式SVG文档是否加载到html页面？

我需要编辑(使用javascript)嵌入在html页面中的SVG文档.

加载SVG后,我可以访问SVG及其元素的dom.但我无法知道SVG dom是否准备就绪,因此我无法在加载html页面时对SVG执行默认操作.

要访问SVG dom,我使用以下代码:

var svg = document.getElementById("chart").getSVGDocument();

其中"chart"是embed元素的id.

如果我在html文档准备就绪时尝试访问SVG,这样:

jQuery(document).ready( function() {
var svg = document.getElementById("chart").getSVGDocument();
...

svg始终为null.我只需要知道它何时不为空,所以我可以开始操纵它.你知道有没有办法做到这一点？

1> Erik Dahlstr..：

---

在主文档中的嵌入元素(例如'embed','object','iframe')中添加一个onload调用函数的属性,或者在脚本中添加事件监听器,例如embeddingElm.addEventListener('load', callbackFunction, false).另一种选择可能是倾听DOMContentLoaded,取决于你想要它.

您还可以在主文档上添加加载侦听器.jQuery(document).ready并不意味着所有资源都被加载,只是文档本身有一个可以采取行动的DOM.但是请注意,如果你在整个文档上监听加载,那么在加载该文档中的所有资源,css,javascript等之前,不会调用回调函数.

如果你使用内联svg,那么jQuery(document).ready将工作得很好.

另外请注意,您可能需要考虑使用embeddingElm.contentDocument(如果可用)而不是embeddingElm.getSVGDocument().

---

如果在脚本运行时已经加载了embeddingElm,embeddingElm.addEventListener('load',callbackFunction,false)将不起作用.如果链接SVG中的图像(如背景图像),DOMContentLoaded将不起作用.你(不应该)想要这样做:类似于:window.onload,因为那时你必须等到所有外部资源都被下载(例如跟踪脚本和广告)

2> Roshan Poudy..：

---

您可以使用onload事件进行检查.

假设some.svg嵌入在object标签中:

jQuery的

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

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

JavaScript的

var svgholder = document.getElementById("svgholder");

svgholder.onload = function() {
    alert("some svg loaded");
}

3> Drew Noakes..：

---

假设你的SVG在一个标签中:

SVG图像基本上位于子文档中,该子文档将具有load与main 的单独事件document.但是,您可以侦听此事件并处理它:

var embed = document.getElementById("embedded-image");
embed.addEventListener('load', function()
{
    var svg = embed.getSVGDocument();
    // Operate upon the SVG DOM here
});

这比轮询更好,因为您对SVG所做的任何修改都会在它首次绘制之前进行,从而减少了绘画时的闪烁和CPU工作量.