jquery - jQuery 可以将 svg 数据注入(inject) css 背景图像 :url()?

Question

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

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

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

Answer 1

你应该这样做:

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

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

• SVG 内容应进行 url 转义