Javascript 将 base64 SVG 放入 HTML DOM 的最简单方法？

Question

现在，我实际上是在 CSS 中使用 Base64 SVG 作为背景图像。但是我喜欢把SVG写成HTML这样就可以方便的通过CSS修改SVG的颜色...

所以问题来了：如何将 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";

Answer 1

我找到了实现此目的的方法：

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

效果很好！但如果有人知道更好的方法，我会很高兴知道:)

Javascript 将 base64 SVG 放入 HTML DOM 的最简单方法？

The easiet way to put a base64 SVG into HTML DOM by Javascript?

javascript

jquery

base64

svg

decode