通过javascript基于字符串创建svg元素答案

【问题标题】：Create svg element based on string via javascript通过javascript基于字符串创建svg元素
【发布时间】：2016-12-14 04:53:26
【问题描述】：

有没有一种简单的方法可以在 vanilla javascript（无库）中将字符串转换为 svg 元素？喜欢：

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';

//convert this string to a DOM element

更新

我通过使用 DOMParser API https://developer.mozilla.org/en-US/docs/Web/API/DOMParser 解决了这个问题

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';

function createSVGElement(data) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(data, "image/svg+xml");
  document.body.appendChild(doc.lastChild);
}

效果非常好，我不必使用 div。

【问题讨论】：

标签： javascript svg

【解决方案1】：

您可以创建一个占位符元素，设置innerHTML，然后获取firstChild

var placeholder = document.createElement('div');
placeholder.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';
var elem = placeholder.firstChild;

【讨论】：

【解决方案2】：

你可以用这个：

var div = document.createElement('div')
document.body.appendChild(div)
div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'

【讨论】：