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

Question

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

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

我可以使用“对象”标签获取webkit中显示的背景，但是我的链接不工作，我无法控制宽度，并遇到一个记录的Safari浏览器的bug，图像未缩放，滑块出现。

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

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

建议欢迎。

G.D.

Answer 1

这是Webkit中的一个错误。如果你保持你当前的背景和在object标签中加载相同的SVG，你会发现SVG背景将会正确加载嵌入数据。要解决这一点，我建议你在这里装载的SVGs在object标签，如创建一个不可见div ...

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

你的CSS：

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