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

我一定在做错事。该图像是作为SVG从Illustrator中导出的（我不确定这是否相关），它确实有一些像素数据。 Here's my JSFiddle example。如何使用SVG图像作为背景？

需要注意的是，直接到图像，它显示了就好： http://ykcreations.com/tv.svg

编辑：这不会在Chrome或Safari工作，但并在Firefox中。 Webkit的问题？

来源

2012-07-17 Yuval Karmi

它看起来像是在为我工作。 – Herohtar 2012-07-17 19:54:13

工作对我来说很好...花了很长时间来加载。 – 2012-07-17 19:55:11

在Chrome/Ubuntu上不适用于我，但在FF/Ubuntu上工作。 – 2012-07-17 19:56:30

它与你做形象，尝试将下面的内容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-17 20:38:14

您可以从HTTP响应头中看到数据未被压缩。 – Phrogz 2012-07-17 20:41:56

标题是否指示文件WAS是否压缩但未正确标记为压缩？（我只问，因为我真的不知道这些东西） – 2012-07-17 20:44:09

如果是这样的话'curl http：// www.ykcreations.com/tv.svg'应该是二进制数据进来。它显示了正确的编码。 – Phrogz 2012-07-17 20:47:30

您的源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气味有关。

来源

2012-07-17 20:38:37 Phrogz

我不太理解你的编辑。我也有一个SVG文件，它不能用作背景，我看它里面有一大块''.. – vsync 2013-06-20 12:59:53

@vsync我在说的是我削减了这个例子非常简单 - '元素没有使用'data：'uri，并且没有使用复杂的内容，并且它本身看起来是正确的，但是不正确的作为背景。这是支持WebKit中存在错误而不是内容问题的信息。 – Phrogz 2013-06-21 03:09:32

有一个错误，我希望我能找到它，所以我可以明星。 – vsync 2013-06-21 13:52:24

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

在Rails，这可以通过添加来完成下列操作以配置/ intializers/mime_types.rb：

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

来源

2016-05-20 23:52:12 joe

我使用https://css-tricks.com/snippets/htaccess/serve修复了它的问题-svg-correct-content-type /＆http://stackoverflow.com/a/37598893/1461060 – gihanchanuka 2016-06-02 17:52:31

我曾与渲染SVG在Chrome中，背景图像的simmilar问题，但一切都在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

来源

2017-10-19 06:43:53 Adi

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

回答

相关问题