通過Javascript將base64 SVG放入HTML DOM的便捷方式？

現在，我實際上使用Base64 SVG作爲CSS中的背景圖像。但我喜歡將SVG寫入HTML，以便我可以通過CSS輕鬆修改SVG的顏色...通過Javascript將base64 SVG放入HTML DOM的便捷方式？

所以，這裏是一個問題：如何將Base64 SVG轉換爲SVG標記並放入我的DOM？

var base64SVG = $('#svgHolder').css('background-image'); 
base64SVG = base64SVG.replace('url("', '').replace('")', ''); 

// Now I have a Base64 SVG, so what else should I do to be able to put in into the DOM?

其實base64SVG變量的內容如下：

var base64SVG = "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#ccc'/%3E%3C/svg%3E";

來源

2016-12-23 Ali

您的背景圖像不是Base64編碼。我認爲你的意思是它是一個數據URI。 –

它是一個編碼的URI。 – Ali

我找到了一種方法來實現這一目標：

var svg = decodeURI($('#svgHolder').css('background-image').replace('url("data:image/svg+xml;charset=utf8,', '').replace('")', '')); 
$('#svgHolder').append(svg); // append the SVG image into the element 
$('#svgHolder').css('background-image', 'none'); // And remove the cssbackground-image, as we don't need it anymore

它的偉大工程！但如果有人知道更好的方法，我會很高興知道:)

來源

2016-12-23 23:10:43 Ali

通過Javascript將base64 SVG放入HTML DOM的便捷方式？

回答

相關問題