我发现此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使用了这些svg

我尝试了以下组合:

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

最佳答案

您不能只写出任何旧字符集并将它们用作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>');
}





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

10-05 20:37
查看更多