为什么html文件引入svg为背景图片不显示?

svg图是我在阿里巴巴矢量图标库里面找到的,我测试的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        i{
            width: 100px;
            height: 100px;
            background-image: url(back.svg);
        }
        .icon {
            display: inline-block;
            background-repeat: no-repeat;
            background-size: 100%;
        }
    </style>
</head>
<body>
    <i class="icon"></i>
</body>
</html>

不知道为什么,svg图片显示不出来,而且浏览器也打开svg图片是空白的。

别人的项目可以打开,我引入和他一样的文件也不行,这是为什么呢?
https://github.com/sevenddddd...

阅读 21.7k
5 个回答

iconfont上下载的svg有问题可能性很小。你下载时设置没设置颜色,如果设置了了白色就不会显示,你可以在下载一次,下载前先把颜色设置为黑色,然后用浏览器打开看一下,或者你将body背景色设置为黑色看一看。

background-image: url(back.svg); 可以直接这样写吗?不可以吧

谢邀。

如果SVG本身用浏览器都打不开,那就不排除是文件本身的问题,建议直接用编辑器打开看看吧,毕竟SVG是纯文本的。

试下用object标签打开:
<object data='../../images/amazon/EUROPE.svg' type="image/svg+xml"></object>

新手上路,请多包涵

background-size: 10%; 试试 因为svg有空白区域,如果你设置的图片过大,就看不见了,并不是不显示。

推荐问题