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,我才能完成这项工作。总结他的建议,我需要进行以下更改:

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

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

回到顶部