css - Safari 中的 SVG 片段 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 似乎在将它们与 CSS 背景图像一起使用时不喜欢 SVG 片段 Sprite 。

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

谢谢大家

最佳答案

在您的服务器中为 SVG 文件添加一个“内容类型” header ,例如在 apache 中将其添加到您的 .htaccess 文件中:
AddType image/svg+xml .svg .svgz

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

相关文章:

html - 图像上有一个奇怪的图标并在其上勾勒出轮廓

html - 如何使将在网站顶部的图像适本地放大或缩小?

javascript - 错误:<svg>属性高度:预期长度,“NaN”

html - 为这些重叠的圆形导航元素创建 anchor 链接?单个图像( Sprite )或切片或?

java - 碰撞检测Java 2D Sprite

html - 如何从导航菜单(小工具下方的+)下删除内容背景

javascript - 相对于其直接父元素放置一个绝对定位元素

javascript - 使用Snap动画化分组/分层的SVG

javascript - 将 [URL] 和 [TITLE] 替换为当前 url 和标题

c# - 着色 Sprite 实际上是在较新版本的 Unity 中批量处理的吗?