我发现此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中工作。