在 Safari 中使用 SVG 标识符会导致问题答案

【问题标题】：Using SVG identifier in Safari causes problem在 Safari 中使用 SVG 标识符会导致问题
【发布时间】：2021-01-21 21:54:25
【问题描述】：

我使用 SVG 作为页脚背景。这是我的代码：

#footer-bg {
  background-image: url("/assets/main-bg.svg#svgView(viewBox(2,0,590,700))");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

这适用于除 Safari 之外的所有浏览器，罪魁祸首是 SVG 标识符 #svgView(viewBox(2,0,590,700))。当我尝试将视图框放入 SVG 文件时，它在 Safari 中工作。

有没有办法解决这个问题？

【问题讨论】：

什么版本的 Safari？有关详细信息和已知问题，请参阅 caniuse.com/svg-fragment。
@RobertLongson 版本 13
只是为了确认一下，我假设您的意思是在您的最后一句话中它在 Safari 中不起作用？
@RichardHunter 如果我将视图框放在 svg 文件中，它就可以工作。
请看一下这个例子：codepen.io/chriscoyier/pen/GndhE Safari 对我来说一切正常。如果它也适合您，您可能需要考虑您使用的 svg 可能是原因

标签： css reactjs svg

【解决方案1】：

当然，您可以使用 hack 使用媒体查询仅针对 Safari 浏览器，然后使用该浏览器的正确值修改 background-image 值。在this StackOverflow post，您可以了解有关这些媒体查询的更多信息。

除此之外，如果您想为 SVG 设置该视图框，为什么不直接编辑 svg 文件，直接在其中设置该视图框并将其从 css 中删除？

【讨论】：

我有多个使用该 svg 文件的页面。我添加了 svg 标识符，所以我只能有一个文件，只需更改 css 中的 viewbox 值