JavaScript从文本呈现SVG

我有一个svg元素作为纯文本

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

---

（因为否则它将不会被渲染）

请尝试以下代码

var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+    
    '<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>'+
    '<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';

    var mysvg = new Image();
    mysvg.src = 'data:image/svg+xml,' + escape(svg);

var svg=''+
''+
'';
var mysvg=新图像（）；
mysvg.src='data:image/svg+xml'，+escape（svg）；

然后使用

mysvg

变量将其放置在html中任何需要的位置。

使用JQuery执行此操作：

var str = '<svg height="100" width="100">  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'

$("body").append(str)

var str=''
$（“正文”）.append（str）

---

工作代码

使用innerHTML插入它

document.documentElement.innerHTML='\n\n'

var str = '<svg height="100" width="100">  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'

$("body").append(str)