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

// do stuff

});

我的HTML看起來(lái)像這樣:

...

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

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

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

// do stuff

});

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

更新:

多虧了echo-flow，我能夠 append 到我的SVG中。現(xiàn)在，如果我嘗試從另一個(gè)xml文件加載指南針svg，它不會(huì)出現(xiàn)在我的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的控制臺(tái)中查看，我會(huì)看到AJAX指南針標(biāo)記請(qǐng)求的結(jié)果是成功的，但為空。

最佳答案

jQuery并不是真正為了解XML namespace 而構(gòu)建的，因此很可能會(huì)解析字符串""，以使生成的DOM節(jié)點(diǎn)位于默認(rèn) namespace (而不是SVG namespace )中。您可以通過(guò)使用常規(guī)DOM創(chuàng)建節(jié)點(diǎn)來(lái)解決此問(wèn)題。如下所示: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

});

如果您需要?jiǎng)?chuàng)建更復(fù)雜的結(jié)構(gòu)，則建議您查看jquery-svg庫(kù)，該庫(kù)具有用于生成SVG DOM的更簡(jiǎn)潔的API。

更新了

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

//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");

關(guān)于jQuery append 到AJAX加載的SVG問(wèn)題，我們?cè)赟tack Overflow上找到一個(gè)類(lèi)似的問(wèn)題：

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。