SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser

问题

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.

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

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.

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.

Suggestions welcome.

G.D.

回答1:

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>

Your CSS:

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

回答2:

The corresponding Webkit bug was fixed and rolled-out with Safari 9.

来源：https://stackoverflow.com/questions/15483215/svg-with-embedded-bitmap-not-showing-bitmap-when-using-img-tag-in-webkit-brows