SVG不会渲染为CSS背景图像

wyyhbhjk 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(144)

我试图实现一个关闭按钮使用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.为什么图像不渲染为背景？
1.如何在:hover上更改SVG填充？（给定我的配置-在上面的链接中提供）

css

来源：https://stackoverflow.com/questions/25947271/svg-wont-render-as-css-background-image

2条答案

按热度按时间

p4tfgftt1#

您需要设置width和height，或<svg>上的viewBox属性。我会推荐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>"，并删除width和height属性。
祝你好运！

赞(0）回复(0）举报 2023-05-08

uqcuzwp82#

在我的示例中，是xmlns属性指定了缺少的XML名称空间
我改变了我的svg：

<svg width="100%" height="100%">
  <rect width="100%" height="100%" fill="#000" id="square" />
</svg>

对此：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <rect width="100%" height="100%" fill="#000" id="square" />
</svg>

然后我用https://meyerweb.com/eric/tools/dencoder/对它进行了url编码
然后我可以把它作为背景图像，像这样：

<html>

<head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23000%22%20id%3D%22square%22%20%2F%3E%0A%3C%2Fsvg%3E");
    }
</style>
</head>

<body>
<div class="box">
</body>

</html>

赞(0）回复(0）举报 2023-05-08

我来回答

SVG不会渲染为CSS背景图像

2条答案

相关问题

热门标签

最新问答