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  
});  

由于某些原因，添加的元素在firebug中显示为隐藏，无论我放在其中是什么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.

更新：

感谢echo-flow 我能够附加到我的SVG。现在，如果我尝试从另一个xml文件加载我的罗盘svg，它不会出现在我的DOM中。目前我的代码看起来像：

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

如果我在firebug中看到控制台，我看到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命名空间，所以字符串 < g id ='compass'>< / g>可能被解析为使得生成的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屋！