html - SVG 不会呈现为 CSS 背景图像

Question

我正在尝试使用 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 x 16 span 但图像未呈现。为什么会这样？此外，图像最初是黑色填充的。我想将其填充更改为白色。有什么办法可以实现吗？

所以，我的问题是:

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

Answer 1

您需要设置 width和 height ，或 viewBox <svg> 上的属性.我会推荐 viewBox ，因为您不需要缩放图形以适应。当然，您可以自由设置所有这些，但这很容易导致混淆您的目的。

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

对于您发布的 SVG，可能的 viewBox 大概是这样的:

<svg viewBox="16 104 170 170" >

我不知道您是如何生成 SVG 的，但为了解决这些问题，我使用了 inkscape。只需打开文件 > 文档属性 > 将文档调整为内容并保存。

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

祝你好运!