SVG不会呈现为CSS背景图像

我正在尝试使用SVG图像作为background-image来实现关闭按钮。以下是我正在使用的代码：SVG不会呈现为CSS背景图像

.close-button { 
    width: 16px; 
    height: 16px; 
    background-image: url(data:image/svg+xml;base64,[The data for the image]); 
    background-size: 16px 16px; 
    background-position: center center; 
} 

<span class="close-button"></span>

您可以测试它here。

它变成了一个16×16的span，但图像没有渲染。这是为什么发生？此外，图像原本是黑色填充的。我想改变它的填充为白色。有什么办法可以做到这一点？

所以，我的问题是：

为什么不将图像渲染为背景？
如何更改在:hover上的SVG填充？（给我的配置 - 可以在上面的链接）

来源

2014-09-20 Victor

svg的外观如何？ – philipp 2014-09-20 09:26:40

http://www.fileformat.info/info/unicode/char/274c/cross_mark.svg – Victor 2014-09-20 09:27:35

您需要设置要么width和height，或在<svg>的viewBox属性。我建议使用viewBox，因为您不需要缩放图形以适应它。当然，您可以自由设置所有图形，但这很容易导致您的目的混乱。

请注意，要获得适合每个元素的SVG，请不要使用width和height并使用viewBox。 Here是viewBox的一个很好的解释。

对于SVG你贴一个可能视框可以大致是这样的：

<svg viewBox="16 104 170 170" >

我不知道你是怎么生成的SVG，但解决这些我用Inkscape的问题。只需打开文件>文档属性>将文档大小调整为内容并保存即可。

如果需要，可以在文本编辑器中打开svg，创建一个这样的viewBox="0 0 <value of width> <value of height>"并删除宽度和高度属性。

祝你好运！

来源

2014-09-20 09:37:12 philipp

我已经从这里下载了SVG：http://www.fileformat.info/info/unicode/char/274c/index .htm，所以我已经把它生成了。 – Victor 2014-09-20 09:50:02

好吧，只需将范围的大小增加到300 300，并将背景大小设置为相同的值，您将看到十字。你看不到它的原因是你正在显示一个没有图形内容的图形区域。在浏览器中打开svg并查看区域0 0 16 16，这只是空白。如果你不能修改SVG，它不会工作。 – philipp 2014-09-20 10:48:27

如果您在使用base64编码修改后的svg时遇到问题：http://www.base64decode.org/ – philipp 2014-09-20 10:50:26

SVG不会呈现为CSS背景图像

回答

相关问题