Question

我发现这个svg在Chrome，Firefox和IE11中正确呈现：

background:#000 url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="21px" cy="21px" r="21" fill="black"/><rect x="9px" y="10px" width="25px" height="22px" fill="white"/></g></svg>');

但是，我在浏览器中使用这些svg图标时遇到了麻烦：

这适用于Chrome和Firefox，但不适用于IE11：

background:#000 url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g><circle cx="21px" cy="21px" r="21px" fill="black"/><g><polyline points="20 30 15 20 25 15 20 7" stroke="white" stroke-width="2"/><circle cx="20" cy="30" r="2.2" fill="white" stroke="white"/><circle cx="20" cy="7" r="2.2" fill="white" stroke="white"/></g></g></svg>');
}

我发现此svg仅适用于Chrome：

background:#000 url('data:image/svg+xml;utf8,<svg width="42" height="42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle r="21" id="svg_2" cy="21" cx="21" fill="#050404"/><path id="svg_3" d="m52.86,21.00981l6.42885,-13.71338l17.14235,0l6.42882,13.71338l-6.42882,13.71425l-17.14235,0l-6.42885,-13.71425z" fill="#ffffff"/></g></svg>');
}

有没有办法让这些svgs跨浏览器工作。我根据this

使用了这些svgs

我尝试了以下组合：

background:black url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="21px" cy="21px" r="21" fill="black"/><rect x="9px" y="10px" width="25px" height="22px" fill="white"/></g></svg>'),linear-gradient(transparent, transparent);

background:%23000 url('data:image/svg+xml;utf8,<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="21px" cy="21px" r="21" fill="black"/><rect x="9px" y="10px" width="25px" height="22px" fill="white"/></g></svg>'),linear-gradient(transparent, transparent);

我也尝试使用此处建议的后备，但它总是呈现png：

body {
  background: url(fallback.png);
  background: url(background.svg),
    linear-gradient(transparent, transparent);
}

Answer 1

你不能只写出任何旧字符集并让它们成为网址。有些人物有特殊的含义。

应该保留字符＃作为片段标识符的开头。虽然Chrome没有正确实现，但Firefox和IE会这样做，这就是最后一个示例不起作用的原因。

如果你在最后的网址中用％23替换所有＃字符，它将在Firefox和IE中使用。 E.g。

＆＃13;

body {
  background:#000 url('data:image/svg+xml;utf8,<svg width="42" height="42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle r="21" id="svg_2" cy="21" cx="21" fill="%23050404"/><path id="svg_3" d="m5.86,21.00981l6.42885,-13.71338l17.14235,0l6.42882,13.71338l-6.42882,13.71425l-17.14235,0l-6.42885,-13.71425z" fill="%23ffffff"/></g></svg>');
}

＆＃13;

我不确定中间网址，对我来说似乎很好。 base64编码可能使它在IE中工作。

在IE11中使用svg

1 个答案: