css - 在 IE11 中使用 svg

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>');
}

有什么方法可以让这些 svg 跨浏览器工作。我使用了这些基于 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

你不能只写出任何旧的字符集并将它们作为一个 url。有些字符具有特殊含义。

字符 # 应该保留为片段标识符的开头。 Chrome 并没有正确地实现这一点，但 Firefox 和 IE 做到了，这就是最后一个示例不起作用的原因。

如果您将最终网址中的所有 # 字符替换为 %23，它将在 Firefox 和 IE 中运行。例如

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>');
}

我不确定中间的 URL，它对我来说似乎没问题。 base64 编码它可能使它在 IE 中工作。