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

Question

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

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

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

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

你能帮我理解为什么吗？

我用Adobe Illustrator生成矢量。

Answer 1

This is a known bug with Safari *

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

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

---

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

Answer 2

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

Answer 3

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

我将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 ... xmlns:xlink="http://www.w3.org/1999/xlink" ...>

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

file2

（based on info I found here）