SVG中的位图无法在Safari中呈现

Posted 2021-05-02

在这个项目中：https://test.restaurantacasa.cat/

我使用矢量作为餐馆标识。在其中一些中，我包含（嵌入svg）一些位图，例如，这里：

https://test.restaurantacasa.cat/#!/restaurant/el-campanar

但是，如果您在Safari（移动设备或桌面设备）中打开该设备，您会注意到未呈现位图部分。

你能帮我理解为什么吗？

我使用Adobe Illustrator生成矢量。

答案

您是否尝试使用<object>嵌入SVG而不是<img>？ <object>元素对<img>所做的外部引用没有相同的限制。

另一答案

This is a known bug with Safari。*

当您将SVG用作<img>时，不会加载外部文件（如嵌入图像）（在任何浏览器中）。为了解决这个限制，Illustrator将嵌入的图像转换为数据URI值，以便嵌入图像的所有数据都存储在SVG文件中。

对于大多数浏览器，这已经足够了。但是，Safari将数据URI值视为引用外部文件的任何其他URL，并且不处理/加载它。

---

*向下滚动链接错误报告的评论，花了一段时间才弄明白问题是什么！主要讨论始于评论16。

另一答案

我也有这个问题，并找到了一个我认为值得发布的解决方案。

我将SVG作为对象嵌入：

<object data="path_to_file.svg" />

并且对象包括图像：

<image href="raster.png" />

除了Safari之外，这在任我发现使用正确的语法是这样的：

<image xlink:href="raster.png" />

此外，如果你是javascripting，仅仅setAttribute()你需要setAttributeNS()是不够的：

el.setAttributeNS("http://www.w3.org/1999/xlink","href","raster.png")

另外，请务必在SVG标记的SVG文件顶部包含xlink NS：

<svg ... xmlns:xlink="http://www.w3.org/1999/xlink" ...>

（Qazxswpoi）