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

问题描述

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

$("#svg").load(svgUrl + " svg", function() {//做东西});

我的 HTML 看起来像这样:

<svg ...>...</svg>

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

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

由于某些原因，添加的元素在 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 请求的结果是成功的，但为空.

解决方案

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);//做东西});

如果您需要创建更复杂的结构，那么我建议您查看 jquery-svg 库，它具有用于生成 SVG DOM 的更清晰的 API.

更新

我误解了您正在尝试加载 SVG 文档并将其附加到您的主机 HTML 文档 - 相反，我认为您正在尝试使用脚本生成 SVG.为了解决您的问题，我建议您执行以下操作(未经测试，但应该可以):

//使用XMLHTTPRequest获取SVG文档$.get(svgUrl + "svg",功能(svgDoc){//将svg文档的内容导入到这个文档中varimportedSVGRootElement = document.importNode(svgDoc.documentElement,true);//将导入的 SVG 根元素附加到适当的 HTML 元素$("#svg").append(importedSVGRootElement);},"xml");

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

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

My HTML looks like that:

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

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

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.

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

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

解决方案

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

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.

Updated

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屋！