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

Question

所以,我正在尝试做这样的事情:

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,我有这个工作.总结他的建议,我需要进行以下更改:

1. 将数据类型更改data:image/svg+xml;utf8为data: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");

Answer 1

IE似乎支持utf8在数据URI中使用,它只是对它更加挑剔.有关详细信息,请参阅此Codepen博客文章,但以下是重点:

作者指出RFC2397并强调:

数据:[<介质类型>] [; BASE64],<数据>

<mediatype>是Internet媒体类型规范(带有可选参数.)"; base64"的外观表示数据编码为base64.如果没有"; base64",则数据(作为八位字节序列)使用ASCII编码表示安全URL字符范围内的八位字节,并对该范围外的八位字节使用URL的标准%xx十六进制编码.如果省略<mediatype>,则默认为text/plain; charset = US-ASCII.作为简写,可以省略"text/plain",但提供charset参数.

• 大多数浏览器都对charset = string很宽松,但它是Internet Explorer所必需的.这意味着你需要使用;charset=utf8,而不是;utf8,.
• 从上面,"没有"; base64",数据(作为八位字节序列)使用ASCII编码表示安全URL字符范围内的八位字节,并使用标准%xx十六进制编码的URL来表示该范围之外的八位字节." 这意味着您必须对不是URL安全的字符进行百分比编码.例如,<svg>到%3Csvg%3E.您可以使用单引号'而不是双引号来最小化需要执行的百分比编码量".

Answer 2

对于IE9,我必须对整个SVG代码进行URL编码.

这是我的SVG背景图像工作流程.

首先在此处粘贴SVG代码以优化它:https: //jakearchibald.github.io/svgomg/("paste markup")

你可以删除"viewBox",但要确保在SVG代码中定义了"width"和"height",IE9需要这个来实现更好的CSS.

现在你有类似的东西:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50"/></svg>

在这种情况下,我必须添加填充颜色,因为没有定义.所以我补充说:

fill="#cc0000"

到路径元素的末尾(如果组中有几个路径元素("g"),你必须将这个填充颜色放到所有这些中.如果SVG有笔画,则对笔画做同样的操作stroke="#cc0000").

现在我们有以下SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50" fill="#cc0000"/></svg>

现在在这里编码整个SVG代码:http://meyerweb.com/eric/tools/dencoder/

所以你得到:

%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E

至少把这整件事放在你的CSS中:

.apple {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E');
    }

一些让我疯狂的好处:

一定要'在CSS中包装SVG后台代码,因为在我们使用的SVG内部"!

一定要用

data:image/svg+xml;charset=UTF-8

没有其他的.

现在,即使在Windows上的IE9中,SVG也会显示颜色"#cc0000"(深红色).

使用此URL编码的SVG,我仍然可以使用PHP变量更改颜色.例如,我只需将"cc0000"替换为:

<?php echo preg_replace("/#/", "", $textcolor); ?>

我为WordPress模板执行此操作,以便客户可以在后端选择图标颜色.