在Safari浏览器中，带有图像的SVG未显示出来。

Question

22 浏览2023年4月11日

匿名的 2023年4月11日

0 Comments

在我的网站内，我嵌入了几个SVG。它们在Chrome、Firefox、IE（9+）和Safari中都能正常工作。然而，一旦SVG中包含图像，Safari就无法渲染图像。

根据之前类似的主题，我尝试了以下方法：

SVG elements not displaying in Safari - 尝试将标签作为包含标签。

SVG Image dosen't appear in Safari - 我觉得这个不太有用，因为这会删除SVG的一部分。

Not able to render SVG image in Safari - 在头部添加了。

除此之外，我真的不知道还能尝试什么。可能还有一个有趣的事情要注意，就是在我的页面中，图像没有显示出来，但我可以在Safari中打开SVG文件（只是文件），它会正确渲染。而且，在浏览器中打开文件后，它也会在页面内渲染。我是用img标签将SVG嵌入到页面中的。

这是我的SVG代码：

我已经缩减了base64图像字符串以缩短代码。完整的SVG可以在这里找到。

更新：为了明确，SVG在浏览器（Safari）中显示，但图像丢失（我只能看到边框）。

0

3 答案

匿名的 · Answer 1 · 2023-05-21T04:22:44+00:00

问题：

Safari浏览器中不显示带有图像的SVG。

原因：

clipPath标签没有在image标签之后关闭。

解决方法：

重新创建clipPath以使其可见，并将clipPath标签放在image标签之后。

代码示例：

其中，clipPath标签需放在image标签之后。

另外，将defs标签移动到svg标签的底部也可以解决问题。

匿名的 · Answer 2 · 2023-08-25T14:52:44+00:00

在Safari中，嵌入式SVG图像无法显示的问题是由于使用了``标签所导致的。解决方法是将该标签替换为``标签。

这种替换方法虽然能够解决问题，但是会导致无法在SVG上应用CSS类，并且无法使用普通的样式表对其进行样式设置。解决这个问题的方法是在SVG中嵌入外部样式表，可以使用类似``的方式，也可以使用内联样式。

匿名的 · Answer 3 · 2023-06-12T04:50:10+00:00

问题的原因是Webkit的一个bug，解决方法是使用脚本找到所有显示SVG图像的img元素，并添加隐藏的object元素来加载相同的SVGs。这个方法的好处是图像仍然使用img标签显示，因此可以在不影响应用程序/网站其他部分的情况下应用和清除此解决方法。缺点是为每个SVG图像创建了额外的object标签。另外，某些情况下这个问题可能仍然存在于页面加载后通过ajax加载的html中。