在 Javascript 中动态添加 SVG答案

【问题标题】：Dynamically adding SVG in Javascript在 Javascript 中动态添加 SVG
【发布时间】：2013-03-29 00:29:03
【问题描述】：

我在 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 中。

这似乎是一种应该非常简单的事情，并且已经被几千人以几种不同的方式实现了。

【问题讨论】：

为什么不嵌入 svg 文件或将其作为对象插入？
见stackoverflow.com/a/6075697/109374

标签： javascript xml dynamic svg

【解决方案1】：

在处理 SVG 时，不要误以为它的工作原理与 HTML 完全一样。这里需要做一些不同的事情：

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

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

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

【讨论】：

我还是有点麻烦。我使用xmlBody = http.responseXML; 来获取 XML。然后我抓取 SVG 节点：var svg = xmlBody.getElementsByTagName("svg")[0];，然后插入所有子节点：var svg = xmlBody.getElementsByTagName("svg")[0]; var gs = svg.childNodes; for (var i = 0; i < gs.length; ++i) { g.appendChild(gs[i]); }，但我在 SVG 中看不到任何内容。但是，当我使用gs=xmlBody.getElementsByTagName("g") 并以相同的方式插入所有这些时，它似乎确实抓住了所有“g”元素并成功插入它们。
你确实是对的！原因显然是节点仍然属于另一个文档，不允许直接添加它们。这仍然很奇怪，这在一种情况下有效，但在另一种情况下无效！我在答案中添加了一些信息。

【解决方案2】：

我没有意识到 appendChild 也会从父级中删除该子级，因此我的实现只获得了大约一半的 SVG 项目。这是工作代码：

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

    var g = document.createElementNS(SVG.ns, "g");
    var svg = xmlBody.getElementsByTagName("svg")[0];
    do {
        var child = svg.firstChild;
        g.appendChild(child);
    } while (svg.firstChild);
    return g;
}

【讨论】：