CSS：在 IE 中背景图像的 URL 参数中使用原始 svg

Posted 2023-03-06

【中文标题】CSS：在 IE 中背景图像的 URL 参数中使用原始 svg

【英文标题】：CSS: Using raw svg in the URL parameter of a background-image in IE

【发布时间】：2015-12-28 12:23:47

【问题描述】：

所以，我正在尝试做这样的事情：

div 
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none'><rect x='0' y='40' width='100' height='20' /><rect x='40' y='0' width='20' height='100' /></svg>");

请看这里：http://jsfiddle.net/trxkcx41/4/

这在当前版本的 Chrome、Safari（OS X 和 ios）和 Firefox 中运行良好。但是，SVG 根本不会出现在 IE 9、10 或 11 中。

这是因为 IE 不支持，还是因为我做错了什么？

[使用解决方案更新]

感谢hungerstar，我已经完成了这项工作。总结他的建议，我需要进行以下更改：

将数据类型从data:image/svg+xml;utf8更改为data:image/svg+xml;charset=utf8（即charset=是必需的）

对 svg 进行 URL 编码。要最小化 URL 编码，请使用 ' 而不是 " 来包含属性。所以，就我而言，只需要对< 和> 进行编码。

最终，我的 CSS 看起来像这样：

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none' %3E%3Crect x='0' y='40' width='100' height='20' /%3E%3Crect x='40' y='0' width='20' height='100' /%3E%3C/svg%3E");

【问题讨论】：

试试svg4everbody。

@hungerstar - 感谢您的链接；这是一个很酷的工具！但是，我真的只是想弄清楚 IE 是否支持这种 SVG 用法，如果支持，我在示例中做错了什么。

我已经成功在数据 uri 中使用 base-64，jsfiddle demo。

我相信您正在寻找this is the answer。

【参考方案1】：

IE 似乎确实支持在数据 URI 中使用 utf8，只是它更挑剔。有关更多详细信息，请参阅此Codepen Blog Post，但以下是重点：

作者指向RFC2397并高亮：

数据：[][;base64],

是 Internet 媒体类型规范（带有可选参数）。“;base64”的出现意味着数据被编码为 base64。如果没有“;base64”，则数据（作为八位字节序列）使用安全 URL 字符范围内的八位字节的 ASCII 编码来表示，并使用该范围之外的八位字节的 URL 的标准 %xx 十六进制编码来表示。如果省略 ，则默认为 text/plain;charset=US-ASCII。作为简写，“text/plain”可以省略，但提供 charset 参数。

大多数浏览器对 charset= 字符串比较宽松，但 Internet Explorer 需要它。这意味着您需要使用;charset=utf8, 而不是;utf8,。 从上面，“如果没有“;base64”，数据（作为八位字节序列）使用安全 URL 字符范围内的八位字节的 ASCII 编码和 URL 的标准 %xx 十六进制编码表示超出该范围的八位字节。” 这意味着您必须对不是 URL 安全的字符进行百分比编码。例如，<svg> 到 %3Csvg%3E。您可以通过使用单引号 ' 而不是双引号 "，最大限度地减少需要完成的百分比编码量。

【讨论】：

你也可以完全省略;charset=utf8，假设你没有在你的svg文件中使用特殊字符

【参考方案2】：

对于 IE9，我必须对整个 SVG 代码进行 URL 编码。

这是我的 SVG 背景图像工作流程。

首先在此处粘贴 SVG 代码以对其进行优化： https://jakearchibald.github.io/svgomg/（“粘贴标记”）

您可以删除“viewBox”，但请确保在 SVG 代码中定义了“width”和“height”，IE9 需要它来更好地实现 CSS。

现在你有类似的东西：

<svg xmlns="http://www.w3.org/2000/svg"  ><path d="M0 0h100L50 50"/></svg>

在这种情况下，我必须添加填充颜色，因为没有定义。所以我补充说：

fill="#cc0000"

到 path 元素的末尾（如果组中有几个路径元素（“g”），则必须将此填充颜色放在所有这些元素中。如果 SVG 有笔画与 stroke="#cc0000" 之类的笔画相同。

现在我们有了以下 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg"  ><path d="M0 0h100L50 50" fill="#cc0000"/></svg>

现在在这里编码整个 SVG 代码：http://meyerweb.com/eric/tools/dencoder/

所以你得到：

%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E

至少将整个内容放在你的 CSS 中：

.apple 
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E');
    

让我抓狂的一些优势：

确保在 CSS 中使用 ' 包装 SVG 背景代码，因为在 SVG 内部我们使用 "！

一定要使用

data:image/svg+xml;charset=UTF-8

没有别的了。

现在即使在 Windows 上的 IE9 中，SVG 也会以颜色“#cc0000”（深红色）显示。

使用这个 URL 编码的 SVG，我仍然可以使用 php 变量更改颜色。例如，我只是将“cc0000”替换为：

<?php echo preg_replace("/#/", "", $textcolor); ?>

我为 WordPress 模板执行此操作，以便客户可以在后端选择图标颜色。

【讨论】：

这对我有用，尽管我发现我必须要有耐心并确保我的代码是正确的并且在上面匹配。轻微的变化导致图像不显示。如果你有困难坚持下去！！

如果你使用的是 SCSS/Sass，这里有一个有用的函数可以用来转换所有需要的字符：gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be

【参考方案3】：

只是对此的一个注释。在 IE 11 中，您可以使用 charset=utf8。您必须至少对 < 和 > 进行 URL 编码（前提是您将 '' 用于不是 "" 的属性值。此外，请小心使用任何非 ASCII 字符。您必须提供它们的UTF-8 编码值 - 即找到一些工具，为您提供字符的 UTF-8 代码（如 Babel Map），然后以 URL 编码形式提供它。即我想渲染 ▾ 字符（U+25BE）。该字符的 UTF-8 表示形式是 URL 编码形式的 \xE2\x96\xBE 和 %E2%96%BE。

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");

【参考方案4】：

这个解决方案对我来说效果很好，我使用 charset=utf8 来代替 utf8。