我正在以编程方式添加 <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。
最佳答案
作为@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 在加载后立即修改,然后再绘制。
关于javascript - 如何知道 <embed> 元素的内容何时加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19137393/