在 webkit 浏览器中使用 <img> 标签时，带有嵌入位图的 SVG 不显示位图答案

【问题标题】：SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser在 webkit 浏览器中使用 <img> 标签时，带有嵌入位图的 SVG 不显示位图
【发布时间】：2013-03-18 17:34:46
【问题描述】：

我正在尝试使用带有嵌入式位图的 SVG 作为导航元素。这个想法是让它对移动设备更友好。我已经为 IE8 及更低版本准备了 PNG 后备。

不知何故，嵌入式位图不会显示在基于 webkit 的浏览器中。没有嵌入位图的 SVG 显示就好了。

我可以使用“对象”标签让背景在 webkit 中显示，但是我的链接不起作用，我无法控制宽度，并且遇到了 safari 的文档错误，其中图像未缩放和滑块出现。

在此处查看相关页面： http://www.izbornareforma.rs/izbori-2012/ 所有图片都是 SVG 格式，下面四张嵌入了位图。

有很多类似的问题，但没有一个可行的解决方案。

欢迎提出建议。

G.D.

【问题讨论】：

标签： svg bitmap webkit

【解决方案1】：

这是 Webkit 中的一个错误。如果您保留当前背景并且在object 标签中加载相同的 SVG，您将看到 SVG 背景将正确加载嵌入数据。要解决这个问题，我建议您创建一个不可见的 div，在其中将 SVG 加载到 object 标签中，例如...

<div id="svgfix">
  <object ... />
  <object ... />
  <object ... />
  <object ... />
</div>

你的 CSS：

#svgfix {
  width: 0; 
  height: 0; 
  position: absolute;
  visibility: hidden;
}

【讨论】：

你有没有这个 webkit bugreport 的链接？
@ErikDahlström 我记得 2011 年左右的另一个错误报告，但这是同一个错误 code.google.com/p/chromium/issues/detail?id=170560
我在您的回答中也错过了这一点。现在我懂了。谢谢。
在 Safari（5.1.10 - Snow Leopard 或 8.0.4 - Yosemite）或 Mobile Safari (iOS 8.1) 上不适合我。基本上它现在不起作用，如果它曾经起作用的话......除非我在你的解释中遗漏了一些东西，但我认为它非常简单。我发现如果您在 HTML 中单独使用 SVG 标记，位图嵌入就可以工作，但由于 SVG 标记无法设置样式（？），这不是一个完整的解决方案。

【解决方案2】：

corresponding Webkit bug 已修复并随 Safari 9 推出。

【讨论】：