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

Question

我正在一个网站上工作,我正在使用SVG片段文件,并通过CSS背景图像加载特定的SVG.

我也有一个PNG后备和我使用的是下面作为作为工作基础: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-css-background -图片

例

.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 文件添加“内容类型”标头，例如在 apache 中将其添加到您的 .htaccess 文件中：

AddType image/svg+xml .svg .svgz