鍍金池/ 問答/室內設計  HTML/ 為什么html文件引入svg為背景圖片不顯示？

為什么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...

回答
編輯回答
忠妾

background-image: url(back.svg); 可以直接這樣寫嗎？不可以吧

2017年4月27日 16:18
編輯回答
厭惡我

iconfont上下載的svg有問題可能性很小。你下載時設置沒設置顏色，如果設置了了白色就不會顯示，你可以在下載一次，下載前先把顏色設置為黑色，然后用瀏覽器打開看一下,或者你將body背景色設置為黑色看一看。

2017年9月1日 13:59
編輯回答
挽青絲

試下用object標簽打開：
<object data='../../images/amazon/EUROPE.svg' type="image/svg+xml"></object>

2017年3月11日 01:12
編輯回答
影魅

謝邀。

如果SVG本身用瀏覽器都打不開，那就不排除是文件本身的問題，建議直接用編輯器打開看看吧，畢竟SVG是純文本的。

2017年5月17日 00:40