SVG在javascript中等待文件准备就绪

Question

我有一个需要在客户端上工作的svg。 一切都很好，但是有时svgDoc-variable的文档尚未准备好。

该文件为3MB-我们需要进行处理，但是它是从子供应商处交付的（从CAD系统导出），因此我不能依靠它来获得更多方便。

而且我知道如何等待svg本身的加载。

我收到此错误：未捕获的TypeError：无法调用null的方法'getElementsByTagName'

我有以下代码：

HTML：

<object id="svg2" width="2000" type="image/svg+xml" data="test.svg" onload="afterSvgLoaded()"></object>

JavaScript的：

    var svgDoc;

function afterSvgLoaded(){

var svg = document.getElementById("svg2"); 
svgDoc = svg.contentDocument;

//Does not work
console.log(svgDoc.getElementById('Lejemaalsnummer').getElementsByTagName('circle'));

//Does work - but I do not want to depend on timeouts
setTimeout("console.log(svgDoc.getElementById('Lejemaalsnummer').getElementsByTagName('circle'))",1000);

}

如何测试svgDoc的准备情况？

Answer 1

有一个onload事件，您可以将其挂接到SVG加载后触发

<object id="svg2" onload="afterSvgLoaded()" width="2000" type="image/svg+xml" data="localFile.svg"></object>

Answer 2

你也可以使用<div>而不是<object>加载与SVG xmlHttpRequest()和你需要的时候做的东西onload回调被调用。 也许是这样的：

var xhr = new XMLHttpRequest();
xhr.open("GET", "test.svg", true);
// Just for safety; not needed if the SVG is served with the correct MIME type:
xmlHttpRequest.overrideMimeType("image/svg+ xml");
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var svgDoc = xhr.responseXML;
      console.log(svgDoc.getElementById('Lejemaalsnummer').getElementsByTagName('circle'));
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

（这基本上是修改后的MDN示例 。）