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（作为字符串）放到页面上的最佳方法是什么？

修改：解决方案！

解决方案是（由于安全性或namespce，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);
}

使用javascript将原始svg插入页面

1 个答案: