为什么我的SVG背景图像无法工作？

Question

我在一个div上放置了一张绿色的PNG图片作为背景，效果如下：

我使用了CSS hack来保持文本位于绿色背景内。以下是该部分的代码：

#aboutprocess {
    background: url("../img/tech_bg.png") no-repeat left top;
    width: 100%;
    background-size: cover;
}
#aboutprocess .container {
    padding-top: 32.6316%;
    position: relative;
}
#aboutprocess .row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#aboutprocess p {
    color: #ffffff;
    text-align: center;
}

<section id="aboutprocess">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ">
                <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
                <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button>
            </div>
            <!--end col-md-8 col-md-offset-2-->
        </div>
        <!--end row -->
    </div>
    <!--end container-->
</section>
<!--end aboutprocess-->

我想用SVG文件替换PNG文件，在CSS中唯一改变的是文件扩展名：

#aboutprocess {
    background: url("../img/tech_bg.svg") no-repeat left top;
    width: 100%;
    background-size: cover;
}

但是当我在浏览器中预览时，我看不到背景图片了：

我做错了什么？您可以在此处查看带有PNG背景图片的演示页面here。

这是链接到SVG文件的Dropbox链接：Dropbox link to the SVG file。

- bijoume

---

你能同时发布你的SVG文件吗？ - Holger Will

我在原帖中更新了一个Dropbox链接。 - bijoume

Answer 1

如果Web服务器传输的“content-type”标题不正确，则浏览器将不会显示SVG文件。

如果您的Web服务返回application/octet-stream或text/xml，则图像将无法正常工作，尽管SVG已正确传输且SVG文件本身正常。

SVG的正确媒体类型是image/svg+xml。

- Felype

Answer 2

这里有几个可能的解决方案：

• 重新审视SVG的创建过程。您使用的软件以及生成SVG的方法（例如在Illustrator中）非常重要。正确的方法是比较特定的。
  _{这是OP的解决方案；请参见评论以获取具体信息}

• 确保 tech_bg.svg 位于它应该在的目录中（即 img 文件夹），并且拼写与文本编辑器中完全相同，包括文件名和扩展名的大小写敏感性。GitHub绝对会将扩展名区分大小写，我曾因此上传SVG文件而遇到问题（.svg与.SVG的问题）。

• 增加 #aboutprocess 的 z-index，特别是如果您的文本真的已经消失了（我假设它仍然存在，只是是白色的，请试着突出显示它以确保）。也可以尝试调整附近的其他CSS值，如 no-repeat、left、top 等。

• 尝试清除浏览器缓存并刷新一次，也可以尝试其他浏览器。另外，如果您恰巧使用 IE8 及以下版本或 Android 2.3 及以下版本，那肯定是原因；它们不支持 background-images 中的SVG。

这是一个难以明确回答的问题，因为我们无法在您本地测试，而这正是出现矛盾的地方。

- Kyle Vassella

---

Photoshop一直是一种基于光栅的图形编辑器，无法生成真正的SVG，而Illustrator是一种基于矢量的图形编辑器，专门设计用于生成真正的SVG。 - Kyle Vassella

好的，我在Illustrator中尝试了同样的方法。但是没有成功。今天我制作了几个其他的SVG文件，都运行良好，因此不能是我生成的问题。 - bijoume

嗯，这是一个非常奇怪的问题。如果我是你，并且我已经尝试了所有上面提到的选项（清除缓存，z-index，正确的文件位置/名称，真正的矢量图像，使用不同的浏览器），我甚至可能会尝试在git push到gh-pages分支中，看看上传后的效果如何。这可能只是你本地机器对SVG有点挑剔。 - Kyle Vassella

如果你把一个PNG文件拖入Photoshop并导出成SVG格式，Photoshop会给它加上.SVG扩展名，但是你的图片几乎肯定会在导出时重新光栅化。因此，你只是添加了.SVG扩展名，而没有使你的文件成为真正的可缩放矢量图像(SVG的作用是使图像可以无限缩放)。Photoshop不适用于生成SVG - 它只设计为与SVG一起使用，因为它必须能够使用Illustrator文件。如果你想要实际创建一个真正的SVG文件，你必须使用Illustrator并使用“Live Trace”按钮。目前你正在使用没有任何益处的SVG文件。 - Kyle Vassella

你是对的。我再试了一次。我从Photoshop中将背景图像导出为PNG格式。我将它放在Illustrator中，使用高保真照片的图像跟踪，并将其保存为SVG格式。现在它可以正常工作了。以前我没有使用过跟踪选项。所以谢谢你！ :) 但这也涉及到另一个问题。跟踪质量不如应该的好。所以我可能还是应该坚持使用PNG格式。我只是不喜欢它留下的粗糙边缘，而我认为SVG会给出更好的结果。 - bijoume

Answer 3

.pic {
    width: 20px;
    height: 20px;
    background-image: url("../img/tech_bg.svg");
    }

不要忘记点和 / ---> ../ 不是背景 ---> 背景图片： 还要记得清除浏览器历史记录和缓存

<div class="pic"></div>

- kamran abbasov

---

请看一下其他的答案。 - L. Guthardt

Answer 4

我的问题是SVG的颜色与背景颜色相同，所以你看不到它。

- ChetPrickles

---

虽然这是有用的信息，但就目前的情况而言，它更像是一条评论而不是一个答案。 - undefined

Answer 5

有时候问题并不总是来自于 CSS。请尝试在您的.htaccess文件中添加以下行，这样服务器就可以从您的 CSS 文件中识别 SVG 文件（background: url("../img/tech_bg.svg") no-repeat left top;）。请插入此行：

RewriteRule !\.(js|ico|gif|jpg|jpeg|svg|bmp|png|css|pdf|swf|mp3|mp4|3gp|flv|avi|rm|mpeg|wmv|xml|doc|docx|xls|xlsx|csv|ppt|pptx|zip|rar|mov)$ index.php

不需要像上面那样有这么多规则，但取决于您希望在网站上拥有的格式，但对于您当前的问题，请确保在您的 .htaccess 文件的规则中有 "svg"。

它有效，请尝试！:)

- Raymond

---

在采用此解决方案之前，请检查您的浏览器网络选项卡或调试控制台。如果请求没有出现错误，则此方法对您没有帮助。 - Sgnl