2

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

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

4

2 回答 2

4

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

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

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

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

于 2013-03-29T01:06:29.077 回答
0

我没有意识到 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;
}
于 2013-03-29T23:48:43.517 回答