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

Question

我一定是做错了。图像作为SVG从Illustrator导出（我不确定这是否相关）它确实有一些像素数据。 Here's my JSFiddle example

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

---

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

Answer 1

您的源SVG存在问题。看到这个更新的小提琴指向可正常工作的a different SVG file：http://jsfiddle.net/wdW2K/2/

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

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

This bug气味相关。

Answer 2

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

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

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

修改 请参阅下面的Phrogz答案（可能在您阅读本文时的上方）;它涵盖了这一点并给出了更好的解释。

Answer 3

另一个可能的原因是使用错误的MIME类型为SVG提供服务。将其设置为'image / svg + xml'可能会解决问题。

在Rails中，可以通过将以下内容添加到config / intializers / mime_types.rb来完成：

Mime::Type.register 'image/svg+xml', :svg

Answer 4

我在Chrome中将svg渲染为背景图像时遇到了同样的问题，但在Firefox中一切都很好。我发现在从Adobe导出的svg文件中存在语法错误：

错误的xlink属性：

xlink:href="data:img/png;base64

更正xlink属性：

xlink:href="data:image/png;base64

文章：

Link to article from css-trick that helped me