jQuery的追加到AJAX加载SVG问题 [英] jQuery appending to AJAX loaded SVG problem

问题描述

我通过AJAX成功加载外部文件的一些SVG：

I am successfully loading via AJAX some svg from external file:

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

我的HTML看起来像：

My HTML looks like that:

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

我可以看到显卡就好了。现在我想一些额外的SVG元素添加到加载SVG。我改变了我的脚本：

I can see the graphics just fine. Now I want to add some additional svg elements to the loaded svg. I changed my script to:

$("#svg").load(svgUrl + " svg", function() {  
    $("svg").append("<g id='compass'></g>");  
    // do stuff  
});  

对于一些理由，隐藏在萤火虫不管我把里面的东西是我的xml不能看到它在我的网页上出现添加的元素。

For some reasons the added element appears as hidden in firebug and no matter what xml I put inside of it I can't see it on my webpage.

更新：结果
由于回声流我可以附加到我的SVG。现在，如果我尝试从另一个XML文件加载我的指南针SVG它不会出现在我的DOM。此刻我的code如下：

Update:
Thanks to echo-flow I was able to append to my SVG. Now if I try to load my compass svg from another xml file it doesn't appear in my DOM. At the moment my code looks like:

$("#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");
});

如果我看在控制台萤火我看到罗盘标记的AJAX请求，即结果是成功的，但是是空的。

If I look in console in firebug I see that result of the AJAX request for compass markup is successful but is empty.

推荐答案

jQuery是不是真正建立要注意XML命名空间，因此字符串＆LT克ID ='指南针'＆GT;＆LT /克＆gt;中很可能得到解析，这样生成的DOM节点都在默认名称空间，而不是SVG的命名空间。您可以通过使用常规的DOM创建节点解决这个问题。这将如下所示：

jQuery is not really built to be aware of XML namespaces, so the string "<g id='compass'></g>"is likely getting parsed such that the generated DOM nodes are in the default namespace, as opposed to the SVG namespace. You can solve this by using regular DOM to create the nodes. This would look like the following:

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。

If you need to create more complex structures, then I would recommend looking at the jquery-svg library, which has a cleaner API for generating SVG DOM.

更新

我误解你试图加载SVG文件并将它添加到你的主机HTML文档 - 相反，我以为你尝试使用脚本生成SVG。为了解决你的问题，我建议做以下（未测试，但应工作）：

I misunderstood that you were trying to load an SVG document and append it to your host HTML document - instead, I thought you were trying to generate SVG using script. To solve your problem, I would recommend doing the following (not tested, but should work):

//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的追加到AJAX加载SVG问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！