javascript - 在 Javascript 中动态添加 SVG

Question

我有一个在 InkScape 等程序中创建的 SVG 文件。我想在 Javascript 中加载它并将其与其他 SVG 元素一起放入 SVG 对象中。

我想要一个可以传递 URL 的函数，它将获取该 SVG，然后返回一个“g”对象，对我加载的 SVG 文件中的所有内容进行分组。

SVG.LoadXML = function (url, continuation) {
    var http = new XMLHttpRequest();
    http.open("GET", url, false);
    http.send();
    textBody = http.responseText;

    var g = document.createElementNS(SVG.ns, "g");

    g.innerHTML = textBody;

    return g;
}

正在加载的文件正文如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC [...] >
<svg version="1.1" [...] >

<g>
  <defs>
    <path id="SVG1ID_1_" [...]
etc.

所以，我认为我想要做的是将文件作为 XML 打开，然后跳过前两个节点，输入第二个节点，并将其中的所有节点复制到文档中的 SVG 中。

这看起来应该是非常简单的事情，并且已经有几千人以几种不同的方式实现了。

Answer 1

在处理 SVG 时，不要陷入期望其工作原理与 HTML 完全相同的陷阱。这里需要做一些不同的事情:

SVG 元素不是 HTML，您无法设置 .innerHTML。请改用 .appendChild()。显然，您只能附加 DOM 元素，而不能附加纯文本，因此请使用 .responseXML 而不是 .responseText。

要导航加载的 SVG，仅选取某些节点，请使用标准 DOM 方法，例如 .getElementById()、.getElementsByTagName()、.childNodes、firstChild、.lastChild 等

要将检索到的 SVG 中的节点附加到主 SVG，您必须先导入它。请参阅another post描述了这一点。