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

Posted 2023-03-06

【中文标题】jQuery 可以将 svg 数据注入 css background-image:url() 吗？

【英文标题】：Can jQuery inject svg data into css background-image:url()?

【发布时间】：2012-12-05 23:12:06

【问题描述】：

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

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

这可能吗？此外，它可以跨浏览器工作吗？

【问题讨论】：

我已经看到这是作为画布完成的 - 你有多灵活？

它可以作为数据 URI 完成，例如background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu [and so on]"); 所以如果你可以将你的数据按摩成那种形式，不知何故......？我发现 jsfiddle.net/estelle/SJjJb 使用直接 SVG，但它似乎只对 webkit 友好。

【参考方案1】：

你应该这样做：

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

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

SVG 内容应该是 url 转义

【参考方案2】：

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

https://***.com/a/21626701/960592

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