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

Posted 2023-03-06

【中文标题】Safari中的SVG Fragment Sprite + CSS背景图像

【英文标题】：SVG Fragment Sprite + CSS Background Image in Safari

【发布时间】：2017-12-11 17:14:49

【问题描述】：

我正在一个使用 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 似乎在将 SVG 片段精灵与 CSS 背景图像一起使用时不喜欢它们。

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

谢谢大家

【问题讨论】：

问题似乎已经在以前的帖子中解决了：***.com/questions/12012573/… 和 ***.com/questions/6372695/…

您也可以尝试用引号编写 url 链接（背景： url('sprite-collection.svg#arrowright') 和/或检查它是否不是服务器端错误（如果是这样的话）可以通过修改.htaccess来解决：***.com/questions/22432293/…)

【参考方案1】：

为服务器中的 SVG 文件添加“内容类型”标头，例如在 apache 中将其添加到您的 .htaccess 文件中：

AddType image/svg+xml .svg .svgz