如何在另一个SVG中插入内联SVG图像

Question

我有一些使用矢量程序创建的SVG代码，应该通过javascript包含到其他SVG文件中。我确实希望将代码放在javascript文件中。那么SVG DOM API中有什么东西我可以直接提供SVG代码而不是使用像“createElementNS”这样的方法吗？

Answer 1

DomParser API将允许您将XML字符串转换为对象。 E.g。

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

然后，您可以使用doc.documentElement获取已解析数据的根元素。如果要将其作为现有元素的子元素插入到文档中，则

element.appendChild(document.importNode(doc.documentElement, true));

应该这样做。

请注意，stringContainingXMLSource的根元素需要一个SVG xmlns属性，例如xmlns="http://www.w3.org/2000/svg"