javascript - 使用javascript将原始svg插入页面

Question

我有一个页面成功地从 JSON 对象请求并解析了一些原始 SVG。问题是获取该 SVG 并将其放入页面中。我有:

function addSVGToPage(SVGToAdd) {
    var entry, decodedEntry;
    makeAJAXCall(SVGToAdd, function (returnedJSON) {
        var svgElement;
        entry = decodeURIComponent(escape(atob(returnedJSON.data.content.replace(/\s/g, ''))));
        decodedEntry = entry.split('\n').slice(2).join('\n');  //remove the first two elements in the file that prevent them from being added as an actual file.

        $(insertArea).append(decodedEntry);  //insertArea is a <div>
    });
}

但它似乎并没有在页面上放置任何东西。

将返回的 SVG(作为字符串)放到页面上的最佳方法是什么？

编辑:解决方案!

解决方案是(由于安全性或 namespace 、IDK)您需要将原始字符串解析为 XML，然后将其导入 DOM。如下

function addSVGToPage(SVGToAdd) {
    var entry, decodedEntry, xmlDoc, importedNode;
    makeAJAXCall(SVGToAdd, function (returnedJSON) {
        var svgElement;
        entry = decodeURIComponent(escape(atob(returnedJSON.data.content.replace(/\s/g, ''))));
        decodedEntry = entry.split('\n').slice(2).join('\n');  //remove the first two elements in the file that prevent them from being added as an actual file.
        xmlDoc = $.parseXML(decodedEntry); // turn the string into an xml fragment

        importedNode = document.importNode(xmlDoc.documentElement, true);
        document.body.appendChild(importedNode);
    });
}

最终没有使用 d3 方法，尽管它是一个很好的方法，因为返回的数据是包含 SVG 的 base64 编码字符串的 JSON(加上一些额外的声明内容)和 jQuery 能够处理它而无需添加一个额外的库。

编辑 2:对于那些感兴趣的人:http://dougmiller.github.com/SVG-Shapes是指向其设置位置的链接。

Answer 1

d3有很好的方法来做到这一点:

d3.xml("tuto3.svg", "image/svg+xml", function(xml) {
   var importedNode = document.importNode(xml.documentElement, true);
}