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

Posted 2023-03-06

【中文标题】CSS背景中的SVG未显示在Safari中

【英文标题】：SVG in CSS backgrounds not showing up in Safari

【发布时间】：2014-04-21 08:31:42

【问题描述】：

以下代码在 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) 中？根据http://caniuse.com 的说法，支持 SVG 作为 CSS 背景图像，但不会显示。

【问题讨论】：

这在 Safari 7.0.1 中非常适合我 - 试试我的 jsFiddle 演示 (jsfiddle.net/grantgibson/MsA2J) 看看它是否适合你。如果我的演示适合你，也许你可以用你自己的 SVG 图像更新小提琴作为下一步？

对我来说也是这样，它甚至可以在我的旧 Safari 5.1.10 上运行。

如果您尝试在 Safari 中直接在其自己的选项卡中打开 SVG 文件，它会正确显示吗？

【参考方案1】：

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

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

AddType image/svg+xml .svg .svgz

这帮助了我：http://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/

【讨论】：

这是 nginx 还是什么？

【参考方案2】：

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

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

...不是：

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

我知道这不是 OP 遇到的问题，但在这里发布此问题是为了让遇到与我相同的问题并来到此线程的其他人的利益。

【参考方案3】：

我通过将以下代码添加到 .htaccess 文件来解决此问题。

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

参考：

以上答案https://***.com/a/22442942/1461060 是正确的 https://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/