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

本文介绍了如何使用SVG图片作为背景？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我必须做错事。该图像作为SVG从图形输出，（我不知道这是否相关），它有一些像素数据。 这是我的JSFiddle示例。

I must be doing something wrong. The image was exported from illustrator as an SVG and (I'm not sure whether this is relevant or not) it does have some pixel data in it. Here's my JSFiddle example.

请注意，直接图片，它显示得很好： ykcreations/tv.svg

Note that going directly to the image, it shows up just fine: ykcreations/tv.svg

修改：此选项在Chrome或Safari中无法使用，但在Firefox中却无法使用。 Webkit问题？

推荐答案

您的源SVG有问题。查看此更新的指向其他SVG文件的更正指向：jsfiddle/wdW2K/2/

There is a problem with your source SVG. See this updated Fiddle pointing to a different SVG file that works correctly: jsfiddle/wdW2K/2/

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

编辑：具体来说， >出现是因为WebKit不支持用作背景的SVG中的< image> 。最低限度修改您的文件以将< image> 更改为引用本地（非数据uri）文件，并添加< circle / > ，在Chrome中直接查看SVG时，我可以看到图片和圆圈，但当用作背景图片时，只有该圆圈可见。

Edit: Specifically, the problem appears to be that WebKit does not support <image> in an SVG used as a background. Modifying your file minimally to change the <image> to reference a local (non-data-uri) file, and adding a <circle/>, I was able to see both the image and circle when viewing the SVG directly in Chrome, but when used as a background image only the circle was visible.

这个错误闻起来相关。