用作背景图像的 SVG 会丢失嵌入图像?

Posted

技术标签:

【中文标题】用作背景图像的 SVG 会丢失嵌入图像?【英文标题】:SVG used as background-image loses embed images? 【发布时间】: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 浏览器上测试过)。 【参考方案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" 确实如此)。希望这有助于消除您在控制台中可能遇到的恼人错误!

【讨论】:

以上是关于用作背景图像的 SVG 会丢失嵌入图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何获得旋转的线性渐变 svg 用作背景图像?

自定义字体未在用作背景图像的 SVG 模式中显示

用作 base-64 背景图像数据时如何更改 svg 填充颜色?

将 SVG 转换为 PNG,并将应用的图像作为 svg 元素的背景

使用 <glyph> 作为“背景图像”,取自单个 SVG

Notes:SVG