Question

我在embed标签中遇到SVG的小问题。我使用javascript更新带有SVG文件路径的embed标记的源代码。然后我必须更新viewbox属性以正确调整SVG的大小。

问题是SVG标记不可用，因为javascript执行太快。

示例：

//Creation and insertion by JQuery
var EmbedTag = $("<embed id='zoomSVG' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto);

//This doesn't work : svgDoc is null
//SVG document recovery
var svgDoc = document.getElementById('zoomSVG').getSVGDocument();

This work :
setTimeout(function(){
   //SVG document recovery
   var svgDoc = document.getElementById('zoomSVG').getSVGDocument();
},100);

我不想使用setTimeout函数，因为超时值取决于硬件。有时100毫秒工作正常，但我必须找到一个通用的解决方案。

嵌入标签插入后，我可以通过javascript重新加载DOM吗？当嵌入对象的加载完成时，是嵌入标记的现有事件吗？

感谢您的帮助

Answer 1

使用标签的»onload«事件来延迟你的功能，直到它被加载，而不是应该可用的。

Answer 2

从嵌入的onload调用代码，例如

var EmbedTag = $("<embed id='zoomSVG' onload='init()' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto);

然后在init中实现您的代码（或任何您想要调用的代码）

Answer 3

首先，您创建元素，然后尝试在DOM中再次找到它。

其次，javascript无法阻止直到发生某些事情，使用了回调函数。

类似的东西：

var svgDoc = false;
// Create an element
var EmbedTag = $("<embed id='zoomSVG' type='image/svg+xml' width='500px' height='500px' />");
// Append it to the dom
EmbedTag.appendTo(zoomGalleryHisto);

// Load the svg file
$.get('file.svg', function() {
    // And then add it to the created element
    EmbedTag.attr('src', 'file.svg');
    svgDoc = EmbedTag.getSVGDocument();
});

更改后重新加载DOM

3 个答案: