我通过
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请求结果是成功但是为空.
解决方法
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,'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");
