Question

我有一个svg，我需要在客户端工作。一切都很好，但有时svgDoc变量的文档还没有准备好。

文件是3MB - 我们需要处理它，但它是从一个子供应商（从CAD系统导出）中提供的，所以我不能依赖它来获得更多便利。

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

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

我有这段代码：

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>，使用xmlHttpRequest()加载SVG并执行调用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 sample。）

SVG等待文件在javascript中准备好

2 个答案: