我正在尝试使用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
,但图像无法渲染。为什么会这样?此外,图像最初是黑色填充的。我想将其填充更改为白色。有没有办法实现这个目标?
所以,我的问题是:
:hover
上的SVG填充? (根据我的配置 - 可在上面的链接中找到)答案 0 :(得分:1)
您需要在width
上设置height
和viewBox
或<svg>
属性。我建议使用viewBox
,因为您不需要缩放图形以适应。当然,您可以自由设置所有图形,但这很容易导致您的目的混淆。
请注意,要获得适合每个元素的SVG,请不要使用width
和height
并使用viewBox
。 Here是viewBox的一个很好的解释。
对于SVG,你发布了一个可能的viewBox大致可能是这样的:
<svg viewBox="16 104 170 170" >
我不知道你是如何生成你的SVG但是要修复我使用inkscape的那些问题。只需打开文件&gt;文档属性&gt;将文档大小调整为内容并保存。
如果需要,可以在文本编辑器中打开svg,创建一个viewBox="0 0 <value of width> <value of height>"
并删除宽度和高度属性。
祝你好运!