在webkit浏览器中使用<img/>标记时，嵌入式位图未显示位图的SVG

Question

我正在尝试使用带有嵌入式位图的SVG作为导航元素。我们的想法是让它更加适合移动设备。对于IE8及以下版本，我已经有了PNG后备版本。

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

我可以使用“对象”标签获取webkit中显示的背景，但后来我的链接不起作用，我无法控制宽度，我遇到了一个记录的safari的错误，其中图像没有缩放和滑块出现。

请参阅此处的相关页面： http://www.izbornareforma.rs/izbori-2012/ 所有图像都是SVG，四个底部的图像都嵌入了位图。

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

建议欢迎。

G.D。

Answer 1

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

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

你的CSS：

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

Answer 2

使用Safari 9修复并推出corresponding Webkit bug。