SVG等待文檔準備在javascript中

我有一個svg，我需要在客戶端上工作。一切都很好，但有時svgDoc變量的文檔還沒有準備好。SVG等待文檔準備在javascript中

該文件是3MB - 我們需要處理這個問題，但它是從一個子供應商（從CAD系統導出）交付的，所以我不能依靠它來獲得更多的便利。

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

我得到這個錯誤：未捕獲的類型錯誤：無法調用 '的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的準備情況？

來源

2013-11-20 Steen

當SVG已經加載

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

來源

2013-11-20 11:03:14

謝謝，但錯誤的問題....在等待實際SVG加載的作品。其後，當我想「查詢」文件...但是，我應該只是使用onload..there，做了，修改了問題 – Steen

如果是這樣的話，這是一個UA錯誤，報告給UA錯誤跟蹤器。 –

好吧....似乎我用於檢查的方法顯然是像onload一樣工作的。對於小文檔，它確實起作用，但是對於較大的文檔，它在觸發我的代碼之後，在svg被轉移到客戶端之後，但在它完全可用於操作之前觸發了我的代碼。當我實現onload時，我並沒有看到這一點，但猜測有些東西被緩存了......現在可以使用。 – Steen

有你可以連接成一個onload事件觸發你也可以使用一個<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）

來源

2013-11-20 13:59:17

SVG等待文檔準備在javascript中

回答

相關問題