SVG 数据图像不能用作伪元素中的背景图像

Posted 2023-03-06

技术标签:

【中文标题】SVG 数据图像不能用作伪元素中的背景图像【英文标题】：SVG data image not working as a background-image in a pseudo element 【发布时间】：2015-08-24 08:43:24 【问题描述】：

我将 SVG 设置为 background-image 用于伪元素：

content: '';
position: absolute;
 right: 0;
bottom: 0;
  left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 620 12" enable-background="new 0 0 620 12" xml:space="preserve"><g><polygon fill="#D11A3C" points="48.8,12 0,12 0,0 54.1,0"/><polygon fill="#952592" points="93.8,12 44,12 49.3,0 99.1,0"/><polygon fill="#1E65AF" points="133.5,12 83.7,12 89,0 138.8,0"/><polygon fill="#D11A3C" points="156.3,12 106.5,12 111.8,0 161.6,0"/><polygon fill="#40BFC2" points="201,12 151.3,12 156.5,0 206.3,0"/><polygon fill="#1E65AF" points="216.4,12 166.6,12 171.9,0 221.7,0"/><polygon fill="#952592" points="226.5,12 176.7,12 182,0 231.7,0"/><polygon fill="#1E65AF" points="241.3,12 191.5,12 196.8,0 246.6,0"/><polygon fill="#40BFC2" points="260.9,12 211.1,12 216.4,0 266.2,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#40BFC2" points="364.2,12 314.4,12 319.7,0 369.5,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#952592" points="430.1,12 380.3,12 385.6,0 435.4,0"/><polygon fill="#1E65AF" points="465.6,12 415.8,12 421.1,0 470.9,0"/><polygon fill="#D11A3C" points="488.3,12 438.5,12 443.8,0 493.6,0"/><polygon fill="#D11A3C" points="620,12 613.4,12 618.7,0 620,0"/><polygon fill="#40BFC2" points="534.2,12 484.5,12 489.8,0 539.5,0"/><polygon fill="#1E65AF" points="548,12 498.2,12 503.5,0 553.3,0"/><polygon fill="#952592" points="556.5,12 506.7,12 512,0 561.8,0"/><polygon fill="#1E65AF" points="573.8,12 524.1,12 529.4,0 579.1,0"/><polygon fill="#40BFC2" points="592.5,12 542.8,12 548.1,0 597.8,0"/><polygon fill="#952592" points="614.4,12 564.6,12 569.9,0 619.7,0"/></g></svg>');
background-repeat: repeat-x;
background-position: bottom;

但由于某种原因，它没有出现在 Firefox 上。我不想使用 base64 数据 URL。这在 Firefox 中根本不可能吗？

【问题讨论】：

@Paulie_D height 工作正常，这是一个 Foundation Sass 函数。输出为 12px 以 rem 为单位。我编辑以免造成混乱我喜欢对我的 svg 和 png 进行 base64 编码，如果我将它们作为背景图像内联到我的 CSS 中。 @hungerstar css-tricks.com/probably-dont-base64-svg 不知道，谢谢你的链接。就我个人而言，我只对小的基本形状进行 base64 编码，比如你会在图标字体中找到的图标。 FWIW - 在<img src="..."> 属性中设置数据时，这也是一个问题。同样的解决方案也适用。 【参考方案1】：

URL 中的 # 字符被保留以指示 fragment identifier 的开始。

您必须对数据 URL 内容进行 URL 编码，这意味着将数据 URL 中的任何哈希字符转换为 %23

【讨论】：

@Robert Longson，你知道为什么这是特定于 Firefox 和 IE Edge 和 Chrome 相关的浏览器不关心这个片段标识符规则吗？还是他们只是善良？ @PeterS IE Edge 和 Chrome 在这方面存在错误。我的数据：image/svg+xml;utf8, 您可以使用this tool 对SVG 进行编码，它是由SVGOMG 的制造商提供的（使用svgo 进行svg 优化）【参考方案2】：

对于在尝试将 url 与 sass 变量（例如用于填充）一起使用时遇到此编码问题的任何人，以下内容非常有用： https://gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be

注意，您可能需要根据需要从 inline-svg 编辑输出 url（在我的情况下，我使用的是 data:image/svg+xml;utf8）

【讨论】：

【参考方案3】：

可以使用JS的encodeURIComponent(uri)函数。

此函数对特殊字符进行编码，还可以对以下字符进行编码：, / ? : @ & = + $ #

参考：https://www.w3schools.com/jsref/jsref_encodeuricomponent.asp

【讨论】：

【参考方案4】：

一个相关问题“svg fill color not working with hex colors”svg fill color not working with hex colors 被提到这里。给出的例子是：

好的：

我在尝试使用 XMLSerializer 导出 svg 时遇到了类似的问题。导出的 svg 在 # 字符之后被截断。就我而言，# 的 %23 替换不起作用。