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?

[更新解决方案]

[UPDATE WITH SOLUTION]

感谢 hungerstar ，我的工作正常。总结他的建议，我需要进行以下更改：

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

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

URL编码svg。要最小化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 ，它只是更加挑剔。请参阅此< a href =http://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris> Codepen Blog Post 了解更多详情，但以下是重点：

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 和要点：

数据：[< mediatype>] [ ; base64]，< data>

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

< mediatype>是一种Internet媒体类型规范（带有可选参数。）; base64的外观表示数据编码为base64。如果没有; base64，则数据（作为八位字节序列）使用ASCII编码表示安全URL字符范围内的八位字节，并对该范围外的八位字节使用URL的标准％xx十六进制编码。如果< mediatype>省略，默认为text / plain; charset = US-ASCII。作为简写，text / plain可以省略但是提供了charset参数。

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 = string是宽容的，但它是Internet Explorer所必需的。这意味着您需要使用; charset = utf8，而不是; utf8，。


• 从上面，没有; base64，数据（作为八位字节序列）使用ASCII编码表示安全URL字符范围内的八位字节，并使用URL的标准％xx十六进制编码对于该范围之外的八位字节。这意味着您必须对不是URL安全的字符进行百分比编码。例如，< svg> 到％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屋！