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

前端之家收集整理的这篇文章主要介绍了CSS:在IE中的背景图像的URL参数中使用原始svg前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以,我正在尝试做这样的事情:
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");

解决方法

IE似乎支持在数据URI中使用utf8,它只是对它更加挑剔.有关详细信息,请参阅此 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 = string很宽松,但它是Internet Explorer所必需的.这意味着你需要使用; charset = utf8,而不是; utf8,.
>从上面,“没有”; base64“,数据(作为八位字节序列)使用ASCII编码表示安全URL字符范围内的八位字节,并使用标准%xx十六进制编码的URL来表示该范围之外的八位字节. “这意味着您必须对不是URL安全的字符进行百分比编码.例如,< svg>到

https://stackoverflow.com/questions/32870788/css-using-raw-svg-in-the-url-parameter-of-a-background-image-in-ie

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:CSS:在IE中的背景图像的URL参数中使用原始svg

原文链接:https://www.f2er.com/css/217686.html

猜你在找的CSS相关文章