用作背景图像的 SVG 会丢失嵌入图像？答案

【问题标题】：SVG used as background-image loses embed images?用作背景图像的 SVG 会丢失嵌入图像？
【发布时间】：2012-09-12 20:37:59
【问题描述】：

我将 svg 用作响应式布局的背景图像，以在线格式重新创建复杂的小册子。

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

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

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

我怎样才能解决这个问题并且仍然能够将 svg 用作背景图像（背景大小：覆盖规则！）？

哦，我应该补充一点，我已经在我的 mac 的 chrome 上看到了这种“现象”，如果它是特定于浏览器的，请说出来！

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

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

提前致谢！

【问题讨论】：

在 Firefox 15.0 上运行良好。
显然这是特定于 Chrome 的（尚未在其他 WebKit 浏览器上测试过）。

标签： css google-chrome svg background-image responsive-design

【解决方案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/

【讨论】：

先生，我可以说你是一个绝对的救生员！
此解决方案完美运行。 $('img').each (function (i, el) { if (el.src.indexOf('.svg', el.src.length - 4) !== -1) { loadSVG(el.src) ; } });

【解决方案2】：

恐怕Webkit 根本不支持这一点。 https://bugs.webkit.org/show_bug.cgi?id=63548 正在跟踪这个问题。

【讨论】：

...该死...现在我必须使用 png 的...双倍工作！

【解决方案3】：

@Duopixel，仅使用“image/xml”作为类型属性也可以（我只在 chrome 中测试过）并且不会导致“资源解释为文档但使用 MIME 类型 image/svg+xml 传输" 错误（而 "image/svg+xml" 确实如此）。希望这有助于消除您在控制台中可能遇到的恼人错误！

【讨论】：