jQuery append 到 AJAX 加载的 SVG 问题

Question

我成功通过 AJAX 从外部文件加载一些 svg:

$("#svg").load(svgUrl + " svg", function() {  
    // do stuff  
});  

我的 HTML 看起来像这样:

<div id="svg" ...>
    <svg ...>
        ...
    </svg>
</div>

我可以很好地看到图形。现在我想向加载的 svg 添加一些额外的 svg 元素。我将脚本更改为:

$("#svg").load(svgUrl + " svg", function() {  
    $("svg").append("<g id='compass'></g>");  
    // 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 请求的结果成功，但为空。

Answer 1

jQuery 并不是真正构建为了解 XML 命名空间的，因此字符串 "<g id='compass'></g>"很可能会被解析，以便生成的 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库，它具有用于生成 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");