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

Question

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

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，我已经完成了这项工作。总结他的建议，我需要进行以下更改：

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

2. 对 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");

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。您可以通过使用单引号 ' 而不是双引号 "，最大限度地减少需要完成的百分比编码量。

Answer 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" width="100" height="100"><path d="M0 0h100L50 50"/></svg>

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

fill="#cc0000"

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><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 模板执行此操作，以便客户可以在后端选择图标颜色。

Answer 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");

Answer 4

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