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

Question

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

嵌入位图无法在基于 webkit 的浏览器中显示。没有嵌入位图的 SVG 显示得很好。

我可以使用“object”标签在 webkit 中显示背景，但是我的链接不起作用，我无法控制宽度，我遇到了一个已记录的 safari 错误，其中图像未缩放和 slider 出现。

请在此处查看相关页面: http://www.izbornareforma.rs/izbori-2012/ 所有图像均为SVG，最下面的四个图像中嵌入了位图。

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

欢迎提出建议。

G.D.

Answer 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;
}