SVG 中的位图无法在 Safari 中呈现
Bitmap in SVG not rendering in Safari
在这个项目中：
https://test.restaurantacasa.cat/
我使用矢量作为餐馆标志。在其中一些中，我包含（嵌入到 svg 中）一些位图，例如，此处：
https://test.restaurantacasa.cat/#!/restaurant/el-campanar
但是，如果您在 Safari（手机或桌面）中打开那个，您会注意到位图部分未呈现。
你能帮我理解为什么吗？
我用 Adobe Illustrator 制作矢量图。
This is a known bug with Safari.*
当您将 SVG 用作 <img> 时，嵌入图像等外部文件不会加载（在任何浏览器中）。为绕过此限制，Illustrator 将嵌入图像转换为数据 URI 值，以便嵌入图像的所有数据都存储在 SVG 文件中。
对于大多数浏览器来说，这就足够了。但是，Safari 将数据 URI 值视为与引用外部文件的任何其他 URL 相同，而不是 process/load。
* 向下滚动链接错误报告的评论，人们花了一段时间才弄清楚问题出在哪里！主要讨论从评论16开始。
您是否尝试过使用 <object> 而不是 <img> 来嵌入您的 SVG？ <object> 元素对外部引用没有与 <img> 相同的限制。
我也遇到了这个问题并找到了一个我认为值得在这里发布的解决方案。
我将 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" ...>
在这个项目中： https://test.restaurantacasa.cat/
我使用矢量作为餐馆标志。在其中一些中，我包含（嵌入到 svg 中）一些位图，例如，此处：
https://test.restaurantacasa.cat/#!/restaurant/el-campanar
但是，如果您在 Safari（手机或桌面）中打开那个，您会注意到位图部分未呈现。
你能帮我理解为什么吗？
我用 Adobe Illustrator 制作矢量图。
This is a known bug with Safari.*
当您将 SVG 用作 <img> 时，嵌入图像等外部文件不会加载（在任何浏览器中）。为绕过此限制，Illustrator 将嵌入图像转换为数据 URI 值，以便嵌入图像的所有数据都存储在 SVG 文件中。
对于大多数浏览器来说，这就足够了。但是，Safari 将数据 URI 值视为与引用外部文件的任何其他 URL 相同，而不是 process/load。
* 向下滚动链接错误报告的评论，人们花了一段时间才弄清楚问题出在哪里！主要讨论从评论16开始。
您是否尝试过使用 <object> 而不是 <img> 来嵌入您的 SVG？ <object> 元素对外部引用没有与 <img> 相同的限制。
我也遇到了这个问题并找到了一个我认为值得在这里发布的解决方案。
我将 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" ...>