2

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

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

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

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

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

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

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

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

提前致谢！

4

3 回答 3

9

如果您在文档级别加载 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/

于 2012-09-20T13:50:23.463 回答
4

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

于 2012-09-20T13:26:13.760 回答
0

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

于 2013-05-25T19:05:14.410 回答