Fatal编程技术网

在Javascript中动态添加SVG

javascript xml dynamic svg

在Javascript中动态添加SVG,javascript,xml,dynamic,svg,Javascript,Xml,Dynamic,Svg,我在InkScape之类的程序中创建了一个SVG文件。我想将其加载到Javascript中，并将其与其他SVG元素一起放入SVG对象中 我希望有一个可以传递URL的函数，它将获取SVG，然后返回一个g对象，对我加载的SVG文件中的所有内容进行分组 SVG.LoadXML = function (url, continuation) { var http = new XMLHttpRequest(); http.open("GET", url, false); http.s

我在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时，不要陷入期望它与HTML完全相同的陷阱。这里需要做一些不同的事情：

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

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

要将检索到的SVG中的节点附加到主SVG，必须首先导入它。请参阅上面的描述。

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

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

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

要将检索到的SVG中的节点附加到主SVG，必须首先导入它。请看下面的描述。

我没有意识到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;
}
我没有意识到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;
}
为什么不嵌入svg文件或将其作为对象插入？查看为什么不嵌入svg文件或将其作为对象插入？查看我仍然有点小问题。我使用了xmlBody=http.responseXML；获取XML。然后抓取SVG节点：var SVG=xmlBody.getElementsByTagNamesvg[0]；然后插入所有子项：var svg=xmlBody.getElementsByTagNamesvg[0]；var gs=svg.childNodes；对于var i=0；i