Question

我知道我在svg背景图片上做错了什么，以免它们出现在IE11上？

（jQuery也在IE上表现，但我对Angular的实际实现工作正常）

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><path fill='#000000' d='M192,32 C103.75,32 32,103.75 32,192 C32,280.25 103.75,352 192,352 C280.25,352 352,280.25 352,192 C352,103.75 280.25,32 192,32 Z M384,192 C384,298 298,384 192,384 C86,384 0,298 0,192 C0,86 86,0 192,0 L192,0 C298,0 384,86 384,192 Z'></path></svg>") no-repeat center;

Answer 1

我最近发现Internet Explorer在background-image属性中使用URL格式有点挑剔。具体来说，您需要以其他方式指定字符集，并对URL编码SVG部分：

background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20400%27%3E%3Cpath%20fill%3D%27%23000000%27%20d%3D%27M192%2C32%20C103.75%2C32%2032%2C103.75%2032%2C192%20C32%2C280.25%20103.75%2C352%20192%2C352%20C280.25%2C352%20352%2C280.25%20352%2C192%20C352%2C103.75%20280.25%2C32%20192%2C32%20Z%20M384%2C192%20C384%2C298%20298%2C384%20192%2C384%20C86%2C384%200%2C298%200%2C192%20C0%2C86%2086%2C0%20192%2C0%20L192%2C0%20C298%2C0%20384%2C86%20384%2C192%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center;

为记录起见，完整的URL编码可能有点过分。您确实只需要执行<和>，但我只是很懒，使用URL编码器，而不是直接编辑代码。

在此问题中将对其进行详细讨论： CSS: Using raw svg in the URL parameter of a background-image in IE

此CodePen显示了具有不同字符集，URL编码和Base64编码的内联SVG的实现之间的区别：https://codepen.io/chriscoyier/pen/zEJtC

SVG背景图像没有出现在IE11上

1 个答案: