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我能够附加到我的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文档并将其附加到主机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('<?xml version="1.0"?>' + svg)
                                            .attr({
                                                    'height': '100%',
                                                    'width': '100%'
                                            });
                            }
                    })

jQuery附加到AJAX加载的SVG问题

3 个答案: