基於字符串通過JavaScript創建svg元素

Question

有沒有簡單的方法來將字符串轉換爲香草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。

Answer 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; 

Answer 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>'