css - 用作背景图像的SVG会丢失嵌入图像吗？

Question

我正在使用svg作为背景图像进行自适应布局，以在线格式重新创建复杂的小册子。

对于矢量对象，一切都可以完美工作，但是如果我将图像嵌入到svg中，它们将不会出现在背景上。

最奇怪的是，如果我自己检查svg，图像在那里，所以这很烦人！

有谁知道它是否与svg配置有关？

如何解决此问题，但仍然可以将svg用作背景图像（background-size：cover规则！）？

哦，我还要补充一点，我已经在Mac中的chrome上看到了这种“现象”，如果它是特定于浏览器的，请这样说！

有问题的svg是这样的：http://nonstoptrip.limsomnium.com/img/fundoinfo1.svg

不幸的是，我不是一个jsfiddler，所以我无法创建任何东西来向大家展示。

提前致谢！

Answer 1

如果您在文档级别加载svg，则会显示图像。您可以稍后删除此元素，并且图像不会消失。您可以将其设置为加载到1px x 1px的元素中...

function loadSVG(svgpath){
     if( /webkit/gi.test(navigator.userAgent.toLowerCase()) ){
       var obj = document.createElement("object");
       obj.setAttribute("type", "image/svg+xml");
       obj.setAttribute("data", svgpath);
       obj.setAttribute("width", "1");
       obj.setAttribute("height", "1");
       obj.setAttribute("style", "width: 0px; height: 0px; position: absolute;visibility : hidden");
       document.getElementsByTagName("html")[0].appendChild(obj);
     }
}

window.onload = function(){
  loadSVG("../img/mySVG.svg");
}

该技术的作者是Dirk Weber，这里有更多详细信息： http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/