Question

我正在尝试添加一个SVG作为背景图像，由于某种原因它没有显示，我不知道为什么。

这是svg：

<svg viewBox="0 0 1000 100" preserveAspectRatio="none">
    <polygon points="0,0 1000,0 1000,50 0,50" style="fill:#01b6ef;" />
    <polygon points="0,0 500,0 0,100" style="fill:#222c37;" />
</svg>

这是CSS：

.head-nav{
    background-image: url("/media/images/header.svg");
    background-repeat: no-repeat;
    height: 100px;
}

这是HTML（带有css引导程序）：

<div class="fluid-container head-nav"></div>

当我查看chrome中的标题时，它们看起来像这样（我也回来了200）：

Accept-Ranges:bytes
Connection:keep-alive
Content-Length:196
Content-Type:image/svg+xml
Date:Sun, 14 Dec 2014 15:46:10 GMT
ETag:"548daee8-c4"
Last-Modified:Sun, 14 Dec 2014 15:38:16 GMT
Server:nginx/1.4.6 (Ubuntu)

当我将xml直接放在html中时，图像会显示，但不会显示为背景图像。有什么建议吗？

Answer 1

当您拥有一个独立的SVG文件作为image / svg + xml时，它必须具有正确的命名空间，否则它将不会显示。如果你将SVG数据直接嵌入到html文件中，html没有名称空间，这就是它的原因。

所以你的SVG文件需要看起来像这样......

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
    <polygon points="0,0 1000,0 1000,50 0,50" style="fill:#01b6ef;" />
    <polygon points="0,0 500,0 0,100" style="fill:#222c37;" />
</svg>

如果你曾试图直接显示独立文件，那么UA应该给你一些有用的信息。

Answer 2

尝试添加background-size：contains;到你的.head-nav课程。 SVG作为背景需要具有背景大小才能显示完整的图像。

使用background-size：contains;它取代了特定的高度和宽度，变得与设备无关。

希望这对你有用。

SVG背景图像未显示

2 个答案: