我有这个 off.svg
图标,我想通过 css 插入它:
<svg height="16" width="16" >
<circle cx="8" cy="8" r="7" fill="red" />
</svg>
CSS:
.off-btn {
background:url(../icons/off.svg)no-repeat;
}
html:
<span class="off-btn" title="offline">offline</span>
但是 svg 图标没有出现。
然而,当我将 off.svg
保存为 off.png
并将 css 更改为:
.off-btn {
background:url(../icons/off.png)no-repeat;
}
圆圈出现了。我在 Chrome 浏览器上对此进行了测试。
这里有什么问题?我该如何解决?
最佳答案
您在 SVG 文件中缺少 SVG 命名空间。如果您尝试在浏览器中加载它,它会告诉您。
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<circle cx="8" cy="8" r="7" fill="red" />
</svg>
关于html - 不显示 CSS 背景 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57690809/