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

我一定要做错事该图像是从插图作为SVG导出的(我不知道这是否相关),它中有一些像素数据.
Here’s my JSFiddle example.

请注意,直接进入图像,它显示的很好：
http://ykcreations.com/tv.svg

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

解决方法

你的源SVG有一个问题.看到这个更新的小提琴指向 a different SVG file可以正常工作： 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时看到图像和圆圈,但是当仅用作背景图像时圈子是可见的.

This bug闻起来相关.