12

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

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

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

4

4 回答 4

9

您的源 SVG 有问题。请参阅此更新的 Fiddle 指向正常工作的不同 SVG 文件：http : //jsfiddle.net/wdW2K/2/

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

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

这个错误闻起来很相关。

于 2012-07-17T20:38:37.110 回答
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 的答案（在您阅读本文时可能在上面）；它涵盖了这一点并给出了更好的解释。

于 2012-07-17T20:38:14.183 回答
1

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

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

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

于 2016-05-20T23:52:12.133 回答
0

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

错误的 xlink 属性：

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

正确的 xlink 属性：

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

文章如下：

链接到帮助我的 css-trick 文章

于 2017-10-19T06:43:53.677 回答