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描述了这一点。