通过接口获取的svg怎么显示在网页上？

img


通过接口获取的svg怎么显示在网页上？
通过接口获取的svg怎么显示在网页上？
通过接口获取的svg怎么显示在网页上？
通过接口获取的svg怎么显示在网页上？


<!DOCTYPE html>
<html>
<body>
    <div id="test"></div>
</body>
<script>
HTMLElement.prototype.appendHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
            // 文档片段，一次性append，提高性能
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
        fragment.appendChild(nodes[i].cloneNode(true));
    }
    this.appendChild(fragment);
    nodes = null;
    fragment = null;
}

var svgStr = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>'
var test = document.getElementById('test')
test.appendHTML(svgStr)
</script>
</html>