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. URL 编码 svg。要最小化 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 确实支持使用 utf8在数据 URI 中，它只是对它更加挑剔。看这个Codepen Blog Post了解更多详情，但这里是亮点:

作者指向RFC2397和亮点:

data:[<mediatype>][;base64],<data>

The <mediatype> is an Internet media type specification (with optional parameters.) The appearance of ";base64" means that the data is encoded as base64. Without ";base64", the data (as a sequence of octets) is represented using ASCII encoding for octets inside the range of safe URL characters and using the standard %xx hex encoding of URLs for octets outside that range. If <mediatype> is omitted, it defaults to text/plain;charset=US-ASCII. As a shorthand, "text/plain" can be omitted but the charset parameter supplied.

• 大多数浏览器都对 charset= 字符串很宽容，但它是 Internet Explorer 所必需的。这意味着您需要使用 ;charset=utf8,而不是 ;utf8, .
• 从上面，“没有”；base64”，数据(作为八位位组序列)使用安全 URL 字符范围内的八位位组的 ASCII 编码表示，并使用 URL 的标准 %xx 十六进制编码表示超出该范围的八位字节。” 这意味着您将必须对不安全的 URL 字符进行百分比编码。例如，<svg>至 %3Csvg%3E .您可以通过使用单引号 ' 来最小化需要完成的百分比编码量。而不是双引号 " .