SVG正在等待文档在javascript中准备就绪

SVG waiting for document to be ready in javascript

本文关键字：javascript 准备就绪 文档 在等待 SVG      更新时间：2023-09-26

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

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

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

我得到这个错误：Uncaught 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的就绪性？

当SVG加载时，可以挂接一个onload事件

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

您也可以使用<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样本。）

相关文章：