ajax 请求svg,jQuery append 到AJAX加载的SVG问题

我已成功通过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/