SVG用作背景图像丢失嵌入图像？

Question

我正在使用svg作为背景图像,用于响应式布局,以在线格式重现复杂的小册子.

一切都适用于矢量对象,但如果我在svg上嵌入图像,它们就不会出现在背景上.

最奇怪的是如果我自己检查svg,图像就在那里,所以这有点烦人!

有谁知道它是否与svg配置或类似的东西有关？

我怎样才能解决这个问题,仍然可以使用svg作为背景图像(背景大小:封面规则!)？

哦,我应该补充一点,我已经看到这个"现象"发生在我的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/