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

AddType image/svg+xml .svg .svgz

Safari中

1 个答案: