IMG＆gt;在嵌入的位图没有显示使用＆LT位图时，SVG;标签在WebKit浏览器 [英] SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser

问题描述

我试图用一个SVG与嵌入式位图作为导航元素。这样做是为了让更多的移动友好。我已经有IE8及以下地方PNG后备。

I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.

不知怎的，嵌入位图不基于WebKit浏览器显示。 SVG无位嵌入式表演就好了。

Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.

我可以得到背景使用对象标签，但随后我的链接不工作，我无法控制宽度的WebKit来显示和我跑到哪里图像不进行缩放Safari和滑块的文档的错误出现。

I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.

请参阅这里问题的网页：
http://www.izbornareforma.rs/izbori-2012/
所有图像都SVG，四个底部之一，他们已经嵌入的位图。

See the page in question here: http://www.izbornareforma.rs/izbori-2012/ All images are SVG, the four bottom one have embedded bitmap in them.

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

There are a number of similar question but none have a workable solution.

建议表示欢迎。

G.D。

推荐答案

这是在WebKit的一个bug。如果保持当前的背景也加载相同SVGs在对象标签，你会看到SVG的背景将与嵌入的数据正确加载。要解决这一点，我会建议你创建一个无形的 DIV 在这里装载的SV​​Gs在对象标记，如...

This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...

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

您的CSS：

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

这篇关于IMG＆gt;在嵌入的位图没有显示使用＆LT位图时，SVG;标签在WebKit浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！