时间戳

首页 > 解决方案 > CSS 背景 SVG 不显示

html - CSS 背景 SVG 不显示

问题描述

我有这个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 浏览器上对此进行了测试。

这里有什么问题？我该如何解决？

标签： htmlcsssvg

解决方案

您在 SVG 文件中缺少 SVG 命名空间。如果您尝试在浏览器中加载它，它会告诉您。

<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
  <circle cx="8" cy="8" r="7"  fill="red" />
</svg>

推荐阅读