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

Question

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

Answer 1

DomParser API将允许您将 XML 字符串转换为对象。例如

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"