Javascript编辑SVG

Question

我想在没有任何框架的情况下直接在JS中编辑SVG文件。

基本上我有一个SVG主文件，其中应该包含一些子SVG。

我已经在Ajax中检索了这些孩子的内容，但我想将它们插入到SVG标签中。

例如，我创建了一个新标签

var svgInclude= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgInclude.setAttribute('id', 'include_1');
svgInclude.setAttribute('height', widthVis);
svgInclude.setAttribute('width', widthVis);
svg.appendChild(svgInclude);

当我想插入从此函数中检索的XML数据时：

function loadXMLDoc(url, cb) {
  var xmlhttp;
  if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
  else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) cb(xmlhttp.responseText);
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

使用：

loadXMLDoc(host + '/svg/frame_panto_v2.svg', function(xml) {
  svgInclude.innerSVG(xml);
});

这不起作用，说Uncaught TypeError: Object #<SVGSVGElement> has no method 'innerSVG'。我也试过使用innerHTML，但我也遇到了同样的错误。

如何将下载的SVG文件“粘贴”到SVG标记中？

感谢您的帮助。

Answer 1

使用DOMParser执行此操作。

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");

将为您提供SVG文档，您可以使用doc。documentElement获取内容，并使用importNode和appendChild添加内容。