jquery - jQuery 可以将 svg 数据注入 css background-image:url() 吗？

Question

我想知道 jQuery 中是否有一种方法可以获取页面上 div 中包含的一些 SVG 数据并将这些数据放入 CSS background-imageurl 中？我正在尝试这样做而不是加载外部 SVG 文件，因为我想要一个完全独立的 HTML 文件。我正在尝试做这样的事情：

var svgData = $("#div-containing-svg").html()
$("other-div").css({backgroundImage:svgData});

这可能吗？而且，它可以跨浏览器工作吗？

score 2 · Accepted Answer

您应该执行以下操作：

var image = $('#svg-container').html();
$('#elem').css('background-image', 'data:image/svg+xml;utf8,' + image);

是跨浏览器吗？在这里你可以看到一个兼容性矩阵：http ://caniuse.com/svg-css

score 0 · Accepted Answer

@minko-geschev 回答的一个工作示例：

提供的答案使用 base64 编码，而不是转义。

2 回答 2