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

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

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

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

1743

2017-07-17 19:50

起源

看起来它对我有用。 - Herohtar

对我来说工作得很好......虽然花了很长时间才加载。 - Paul Armstrong

在Chrome / ubuntu上不适合我，但在FF / ubuntu上工作。 - Denys Séguret

是否有可能在加载之前尝试显示它？ - Yuval Karmi

我向您保证，Chrome和Safari的最新版本都支持没有插件的SVG。它与您的图像文件有关，请参阅下面的答案，插入备用SVG。 - Sandy Gifford

您的源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 味道相关。

2017-07-17 20:38

我不太明白你的编辑。我还有一个SVG文件，它不能作为背景使用，我发现它里面有很大一部分 <image>.. - vsync

@vsync我所说的是我把这个例子简化为非常简单的 <image> 元素没有使用 data: uri，并没有使用复杂的内容 - 它本身看起来正确但作为背景不正确。这是支持相信WebKit中存在错误而不是内容问题的数据。 - Phrogz

有一个错误，我希望我能找到它，所以我可以为它加星标。 - vsync

@vsync我相信这是我引用的： bugs.webkit.org/show_bug.cgi?id=15443 - Phrogz

它与您的图像有关，请尝试将以下内容插入您的图像中 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答案（可能在您阅读本文时的上方）;它涵盖了这一点并提供了更好的解释。

2017-07-17 20:38

您可以从HTTP响应标头中看到数据未被gzip压缩。 - Phrogz

标题是否表示文件是否已压缩但未正确标记为压缩文件？（我问的只是因为老实说我不知道这些事情） - Sandy Gifford

如果是这样的话 curl http://www.ykcreations.com/tv.svg 应该二进制数据进来。它没有;它显示正确的编码。 - Phrogz

啊，好吧，无论如何，你的回答似乎涵盖了两件事。 - Sandy Gifford

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

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

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

2018-05-20 23:52

我用PHP修复了它 css-tricks.com/snippets/htaccess/serve-svg-correct-content-type ＆ stackoverflow.com/a/37598893/1461060 - gihanchanuka

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

错误的xlink属性：

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

正确的xlink属性：

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

文章如下：

2017-10-19 06:43

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