[英]Create svg element based on string via javascript
有沒有一種簡單的方法可以將字符串轉換為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/zh-CN/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。
您可以創建一個占位符元素,設置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;
您可以使用此:
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>'
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.