CSS:在 IE 中背景图像的 URL 参数中使用原始 svg [英] CSS: Using raw svg in the URL parameter of a background-image in IE

问题描述

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

So, I'm trying to do something like this:

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 中.

This works beautifully in current versions Chrome, Safari (OS X and iOS), and Firefox. However, the SVG doesn't appear at all in IE 9, 10, or 11.

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

Is that because this is not supported in IE, or because I'm doing something wrong?

[更新解决方案]

多亏了 hungerstar，我才能完成这项工作.为了总结他的建议，我需要进行以下更改:

Thanks to hungerstar, I've got this working. To summarize his recommendation, I needed to make the following changes:

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

1. Change the data type from data:image/svg+xml;utf8 to data:image/svg+xml;charset=utf8 (i.e., charset= is required)

对 svg 进行 URL 编码.为了最小化 URL 编码，使用 ' 而不是 " 来包含属性.所以，在我的例子中，只有 < 和 > 需要编码.

URL encode the svg. To minimize the URL-encoding, use ' instead of " to enclose the attributes. So, in my case, only the < and > needed to be encoded.

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

To, ultimately, my CSS looked like this:

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

推荐答案

IE 似乎支持在数据 URI 中使用 utf8，但它只是更加挑剔.有关更多详细信息，请参阅此 Codepen 博客文章，但这里有重点:

IE does appear to support using utf8 in a data URI, it's simply being more fussy about it. See this Codepen Blog Post for more details but here are the highlights:

作者指向RFC2397并强调:

data:[][;base64],

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

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

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 编码表示，并使用标准的 %xx 十六进制 URL 编码表示超出该范围的八位字节." 这意味着您必须对不是 URL 安全的字符进行百分比编码.例如， 到 %3Csvg%3E.您可以通过使用单引号 ' 而不是双引号 " 来最小化需要完成的百分比编码量.
• Most browsers are lenient about the charset= string, but it's required for Internet Explorer. That means you need to use ;charset=utf8, instead of ;utf8,.
• From above, "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." Which means you will have to percent-encode characters that aren't URL-safe. For example, <svg> to %3Csvg%3E. You can minimize the amount of percent encoding that needs to be done by using single quotes ' instead of double quotes ".

这篇关于CSS:在 IE 中背景图像的 URL 参数中使用原始 svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！