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>");
}
在当前版本的Chrome,Safari(OS X和iOS)和Firefox中,这可以很好地工作。但是,SVG根本不会出现在IE 9、10或11中。
是因为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似乎确实支持utf8
在数据URI中使用,只是对此更加 挑剔。但以下是重点内容:
作者指向RFC2397并强调:
数据:[
] [; base64],
是Internet媒体类型规范(带有可选参数)。出现“; base64”表示数据被编码为base64。如果不使用“; base64”,则数据(作为八位字节序列)使用ASCII编码表示安全URL字符范围内的八位字节,并使用标准%xx十六进制URL编码表示超出该范围的八位字节。如果省略
,则默认为text / plain; charset = US-ASCII。作为简写,可以省略“文本/纯文本”,但提供了charset参数。
- 大多数浏览器对charset =字符串宽容,但是InternetExplorer必需。这意味着您需要使用
;charset=utf8,
而不是;utf8,
。 - 从上面开始, “不带“; base64”时,数据(作为八位位组的序列)使用安全URL字符范围内的八位位组的ASCII编码和超出该范围的八位位组的URL的标准%xx十六进制编码表示。” 这意味着您必须对不是URL安全的字符进行百分比编码。例如,
<svg>
以%3Csvg%3E
。您可以使用单引号'
而不是双引号来最小化需要完成的百分比编码量"
。
以上是 CSS:在IE中背景图片的URL参数中使用原始svg 的全部内容, 来源链接: utcz.com/qa/423227.html