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

小编典典

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

css

所以，我正在尝试做这样的事情：

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");

阅读 663

2020-05-16

共1个答案

小编典典

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。您可以使用单引号'而不是双引号来最小化需要完成的百分比编码量"。

2020-05-16