我已成功通過AJAX從外部文件加載了一些svg:$("#svg").load(svgUrl + " svg", function() {

// do stuff

});

我的HTML看起來像這樣:

...

我可以看到圖形很好。現在，我想向已加載的svg添加一些其他svg元素。我將腳本更改為:

$("#svg").load(svgUrl + " svg", function() {

$("svg").append("");

// do stuff

});

由于某些原因，添加的元素在Firebug中顯示為隱藏，并且無論我放入其中的xml如何，都無法在網頁上看到它。

更新:

多虧了echo-flow，我能夠 append 到我的SVG中。現在，如果我嘗試從另一個xml文件加載指南針svg，它不會出現在我的DOM中。目前，我的代碼如下所示:

$("#svg").load(obj.svgUrl + " svg", function() {

var svgns = "http://www.w3.org/2000/svg";

var g = document.createElementNS(svgns,"g");

g.setAttributeNS(null,'id','compass');

$("svg").append(g);

$("#compass").load("files/svg/compass.xml");

});

如果我在Firebug的控制臺中查看，我會看到AJAX指南針標記請求的結果是成功的，但為空。

最佳答案

jQuery并不是真正為了解XML namespace 而構建的，因此很可能會解析字符串""，以使生成的DOM節點位于默認 namespace (而不是SVG namespace )中。您可以通過使用常規DOM創建節點來解決此問題。如下所示:svgns = "http://www.w3.org/2000/svg"

$("#svg").load(svgUrl + " svg", function() {

var g = document.createElementNS(svgns,"g");

g.setAttributeNS(null,'id','compass');

$("svg").append(g);

//do stuff

});

如果您需要創建更復雜的結構，則建議您查看jquery-svg庫，該庫具有用于生成SVG DOM的更簡潔的API。

更新了

我誤解了您正在嘗試加載SVG文檔并將其 append 到您的宿主HTML文檔中-相反，我認為您正在嘗試使用腳本生成SVG。為了解決您的問題，我建議您執行以下操作(未經測試，但應該可以):

//get the SVG document using XMLHTTPRequest

$.get(svgUrl + " svg",

function(svgDoc){

//import contents of the svg document into this document

var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);

//append the imported SVG root element to the appropriate HTML element

$("#svg").append(importedSVGRootElement);

},

"xml");

關于jQuery append 到AJAX加載的SVG問題，我們在Stack Overflow上找到一個類似的問題：

https://stackoverflow.com/questions/6802283/

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ajax 请求svg,jQuery append 到AJAX加载的SVG问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。