我在一个网站上工作，我正在使用 SVG 片段文件并通过 CSS 背景图像加载特定的 SVG。
我也有一个 PNG 后备，我使用下面的作为工作的基础:https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-css-background-image
例子
.ico-arrow-right {
background: url(ico-arrow-right.png);
background: url(sprite-collection.svg#arrowright),
linear-gradient(transparent, transparent);
}
问题是，它似乎在大多数浏览器上都能正常工作，但在桌面和 IOS 浏览器上的 Safari 中，SVG 不会出现，只会显示一个空白区域。对此进行调查，似乎设备上的 Safari/webkit 在将它们与 CSS 背景图像一起使用时不喜欢 SVG 片段 Sprite 。
是否有任何解决方案/解决方法？我仍然想使用 CSS 背景图像来提取 PNG/SVG，并且不想恢复使用单独的 SVG 文件，因为有超过 60 个 svg，我不希望所有这些服务器请求!
谢谢大家
最佳答案
在您的服务器中为 SVG 文件添加“内容类型” header ，例如在 apache 中将其添加到您的 .htaccess 文件中:
AddType 图像/svg+xml .svg .svgz
关于css - Safari 中的 SVG 片段 Sprite + CSS 背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44970212/