Safari中的SVG Fragment Sprite + CSS背景图片

Question

我正在一个网站上工作，我正在使用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片段精灵。

有没有解决方案/解决这个问题？我仍然想使用CSS背景图像来引入PNG / SVG，并且不想恢复使用单个SVG文件，因为有超过60个svgs并且我不希望所有这些服务器请求！

谢谢大家

Answer 1

在服务器中为SVG文件添加“content-type”标头，例如在apache中将其添加到.htaccess文件中：

AddType image/svg+xml .svg .svgz