Html CSS背景中的SVG未显示在Safari中

下面的代码在Safari中不起作用，并且图像不会显示。这只发生在Safari中，它在所有其他浏览器中都有效，我不明白为什么。以下是CSS代码：

.hero {
        background: url(images/cards.svg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        height:180px;
        width:100%;
        margin-bottom:20px;
    }

以及HTML代码：

<div class="hero"></div>

---

更新：当将“cards.svg”转换为JPG时，上面的代码可以工作，但我更愿意使用svg，因为它们加载速度更快。为什么SVG不会出现在Safari（7.0.1）中？根据，支持SVG作为CSS背景图像，但它不会显示。

这是因为我的服务器提供的内容类型不正确

必须将此添加到我的.htaccess文件：

AddType image/svg+xml .svg .svgz

---

这帮了我的忙：

我通过在.htaccess文件中添加以下代码解决了这个问题

<ifModule mod_headers.c>
    <FilesMatch "\.(svg|svgz)$">
    Header set Content-Type "image/svg+xml"
    </FilesMatch>
</IfModule>

标题集内容类型“image/svg+xml”

参考：

• 以上答案是正确的

---

我遇到了同样的问题，尽管在我的情况下，问题不在于内容类型。事实证明，我必须在URL周围添加引号才能使其正常工作，即：

background-image: url('/path/to/my.svg');

……不是：

background-image: url(/path/to/my.svg);

---

我知道这不是OP遇到的问题，但是在这里发布这篇文章是为了让其他遇到与我相同问题的人受益。这在Safari 7.0.1中非常适合我-试试我的JSFIDLE demo（），看看它是否适合你。如果我的演示适合你，也许你可以用你自己的SVG图像更新小提琴作为下一步？是的，我也一样，它甚至可以在我的旧Safari 5.1.10上工作。如果你尝试在Safari中直接在它自己的选项卡中打开SVG文件，它是否正确显示？这是用于nginx还是什么？