SVG 中的位图未在 Safari 中呈现答案

【问题标题】：Bitmap in SVG not rendering in SafariSVG 中的位图未在 Safari 中呈现
【发布时间】：2017-12-16 05:25:53
【问题描述】：

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

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

你能帮我理解为什么吗？

我使用 Adobe Illustrator 制作矢量。

【问题讨论】：

【解决方案1】：

您是否尝试过使用<object> 来嵌入您的SVG，而不是<img>？ <object> 元素对外部引用的限制与 <img> 不同。

【讨论】：

【解决方案2】：

This is a known bug with Safari.*

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

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

* 向下滚动链接错误报告上的 cmets，人们花了一段时间才弄清楚问题所在！主要讨论围绕评论 16 开始。

【讨论】：

【解决方案3】：

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

我将 SVG 作为对象嵌入：

<object data="path_to_file.svg" />

并且对象包含的图像为：

<image href="raster.png" />

这在除 Safari 之外的任何地方都有效。我发现正确的语法是这样的：

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

此外，如果您使用 javascript，仅 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" ...>

【讨论】：