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添加它。