SVG不会渲染为CSS背景图像

时间:2014-09-20 09:23:23

标签: html css svg

我正在尝试使用SVG图像background-image来实现关闭按钮。以下是我正在使用的代码:

.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,但图像无法渲染。为什么会这样?此外,图像最初是黑色填充的。我想将其填充更改为白色。有没有办法实现这个目标?

所以,我的问题是:

  1. 为什么图像不呈现为背景?
  2. 如何更改:hover上的SVG填充? (根据我的配置 - 可在上面的链接中找到)

1 个答案:

答案 0 :(得分:1)

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

请注意,要获得适合每个元素的SVG,请不要使用widthheight并使用viewBoxHere是viewBox的一个很好的解释。

对于SVG,你发布了一个可能的viewBox大致可能是这样的:

<svg viewBox="16 104 170 170" >

我不知道你是如何生成你的SVG但是要修复我使用inkscape的那些问题。只需打开文件&gt;文档属性&gt;将文档大小调整为内容并保存。

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

祝你好运!