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中都非常有效.但是,在IE 9,10或11中根本没有出现SVG.
是因为这在IE中不受支持,还是因为我做错了什么？
[更新解决方案]
感谢hungerstar,我有这个工作.总结他的建议,我需要进行以下更改：
>将数据类型从data：image / svg xml; utf8更改为data：image / svg xml; charset = utf8(即charset =是必需的)
> 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");
解决方法
作者指出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 = string很宽松,但它是Internet Explorer所必需的.这意味着你需要使用; charset = utf8,而不是; utf8,.
>从上面,“没有”; base64“,数据(作为八位字节序列)使用ASCII编码表示安全URL字符范围内的八位字节,并使用标准％xx十六进制编码的URL来表示该范围之外的八位字节. “这意味着您必须对不是URL安全的字符进行百分比编码.例如,< svg>到
本站文章除注明转载外，均为本站原创或编译
转载请明显位置注明出处：CSS：在IE中的背景图像的URL参数中使用原始svg
