如何使用SVG图像作为背景？

Question

我一定做错了什么.图像作为SVG从Illustrator导出(我不确定这是否相关)它确实有一些像素数据. 这是我的JSFiddle示例.

请注意,直接转到图像,它显示正常:http://ykcreations.com/tv.svg

---

编辑:这在Chrome或Safari中不起作用,但在Firefox中起作用.Webkit问题？

Answer 1

您的源SVG存在问题.看到这个更新的小提琴指向一个正常工作的不同SVG文件:http://jsfiddle.net/wdW2K/2/

.tv {
  background: url("http://phrogz.net/svg/800x800.svg");
  width: 400px; height: 400px;
}?

编辑:具体来说,问题似乎是WebKit不支持<image>在用作背景的SVG中.最低限度地修改文件以更改<image>引用本地(非数据uri)文件,并添加一个<circle/>,我可以直接在Chrome中查看SVG时看到图像和圆圈,但仅用作背景图像时圆圈是可见的.

这个bug闻起来很有意思.

Answer 2

它与您的图像有关，请尝试将以下内容插入您的CSS：

\n\n

.tv\n{\n    background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");\n    width: 400px;\n    height: 400px;\n}\xe2\x80\x8b\n

\n\n

也许你SVG实际上是一个SVGZ？ SVGZ文件是文件的压缩版本SVG。通常您必须配置服务器来处理该问题，但 FF 可能只能处理压缩版本。

\n\n

编辑\n请参阅下面 Phrogz 的答案（当您阅读本文时可能在上面）；它涵盖了这一点并给出了更好的解释。

\n