jQuery附加到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我能够附加到我的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请求的结果是成功的但是是空的。

Answer 1

jQuery实际上并不是为了"" XML命名空间而构建的，因此字符串""可能会被解析，使得生成的DOM节点位于默认命名空间中，而不是SVG命名空间。 您可以使用常规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库，它有一个更清晰的API来生成SVG DOM。

更新

我误解了你是在尝试加载SVG文档并将其附加到主机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"); 

Answer 2

如果你开始使用jquery canvas可能会更容易。 这是一种用于描述XML中的二维矢量和混合矢量/光栅图形的模块化语言

Answer 3

我让它像这样工作。

  $.ajax({ url: url, data: {data:tosendAlong}, type: "POST", dataType: "text", success: function (svg) { $("#map").html('' + svg) .attr({ 'height': '100%', 'width': '100%' }); } })