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

标签 css svg sprite sprite-sheet

我正在使用 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 片段 Sprite 与 CSS 背景图像一起使用时不喜欢它们。

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

谢谢大家

最佳答案

为服务器中的 SVG 文件添加“内容类型” header ,例如在 apache 中将其添加到您的 .htaccess 文件中:

AddType image/svg+xml .svg .svgz

关于css - Safari中的SVG Fragment Sprite + CSS背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44970212/

相关文章:

css - 如何在Bootstrap 4上定位笔记本电脑和台式机?

javascript - 无法删除填充

CSS 100% 来自 div 而不是整个页面

css - 如何将 clipPath 应用于 div,其中 clipPath 位置相对于 div 位置

HTML 网格布局被 SVG 子元素破坏

swift - 如果只有 Sprite 的下半部分很重要,如何检查碰撞(想想带茎的樱桃)

java - 当相机平移时, Sprite 不会跟随 box2d 主体,但如果相机在 libgdx 中是静态的,则效果很好

c# - 如何自定义一个asp:Button类?

javascript - 在隐藏的 svg 路径上应用阴影

Swift 1.2 SpriteKit 坐标系原点