我正在以编程方式将<embed> 标记添加到我的 HTML 文档中：
var e = document.createElement('embed');
e.src = "some-image.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);
这工作正常，SVG 元素按预期显示。但是，我想使用 JavaScript 操作 SVG 元素，并且在将元素添加到 DOM 后立即尝试这样做会失败，因为内容尚未加载。
我该怎么做。请注意，我想在 不使用 jQuery 的情况下执行此操作，因此请不要指向 jQuery API。
【问题讨论】：
e.addEventListener("load", function() { ... }) 呢？
标签： javascript embed-tag
正如@RGraham 在评论中指出的那样，<embed> 元素会在其内容准备好时引发load 事件。
所以我的代码变成了：
var e = document.createElement('embed');
e.src = "img/z-slider.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);
e.addEventListener('load', function()
{
// Operate upon the SVG DOM here
e.getSVGDocument().querySelector('#some-node').textContent = "New text!";
});
这比轮询更好，因为没有闪烁。 SVG 会在加载后立即修改，然后再绘制。
【讨论】：
为创建的元素分配一个id。
function check_if_loaded() {
var your_svg = document.getElementById("id").getSVGDocument();
if (your_svg) {
alert("loaded");
} else {
console.log("not yet loaded")
}
}
your_element.addEventListener('load',check_if_loaded, false)
【讨论】：
load 事件触发时，SVG 文档是可用的。
id，因为我已经引用了它（在我的示例中为e。）
clear_me_later 是事件回调函数的私有，因此对 clearInterval 的调用将不起作用。