SVG背景在Safari中无法显示

Question

在Firefox和Chrome中正常工作。Safari无法显示我的SVG背景图像。怎么回事？

HTML

<div class="container">
    <div class="row">
        <header class="span12 hero-unit">
            <h1>Timeline</h1>
        </header>
    </div>
    <div class="svg"></div>
</div>

CSS

.svg {
    width: 200px;
    height: 200px;
    background-image: url(../img/mars.svg);
    background-size: contain;
}

Link

http://distantfuturejosh.com/timeline/

- wetjosh

---

你知道 http://distantfuturejosh.com/timeline/img/mars.svg 只是一个包含base64编码的png图像的svg包装器吗？所以，你可以直接使用png。虽然作为真正的矢量图形，它可能会非常小。我猜测在Safari中，svg背景中的数据URI被禁止（或存在错误）。 - Erik Dahlström

Erik，我怀疑在Illustrator中没有正确保存文件！这就解释了为什么只能缩放到一定程度而不失去质量。我想我需要在Adobe论坛上发布帖子，以找出如何对光栅图像进行实时跟踪并将其转换为纯矢量SVG的方法。 - wetjosh

Erik，当你的评论被点赞时，你会得到声望吗？我不想把你的答案选为正确答案，因为是你让我意识到了我的错误。但我也不想让这个问题无人回答... - wetjosh

请接受解决问题的答案，这也有助于其他人。不要担心声望。 - Erik Dahlström

Answer 1

好的，我的问题是一个图形软件问题，而不是一个网页代码问题。但是为了记录，我所做的是在Illustrator中打开一个栅格psd文件，并将其保存为svg文件。正如Erik指出的那样，这只是将一个png嵌入到svg中。要解决这个问题，我只需在Illustrator中选择对象，选择Object > Image Trace > Make。然后我选择了我喜欢的图像跟踪预设（6种颜色），并将其保存为svg。效果非常好。

- wetjosh

Answer 2

你尝试过像这样省略 "-image" 吗？

background: url(../img/mars.svg);

参考 使用SVG作为背景图像

- Scott Solmer

---

已按照您的建议尝试移除了“-image”，但仍然无法工作 :( - wetjosh

@wetjosh 你有其他版本的Safari或者运行Safari的机器来确认这不仅仅是一个机器的问题吗？ - Scott Solmer

好的，刚在一台运行Safari 5的旧款Mac上进行了测试（比当前的版本旧一版），但仍然无法工作。不过还是谢谢你提供的建议。 - wetjosh

Answer 3

我刚刚在搜索关于SVG背景的问题，发现它在Windows Safari上无法正常工作。经过广泛的搜索，我找到了这个问题。我是这样使用它的：使用线性渐变。

background:url("../images/cover-blue-nodots.svg"), linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);

它之前无法工作，我只是使用了 WebKit 并在其中提供了所有这些东西，现在它可以工作了。

background:url("../images/cover-blue-nodots.svg"), linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);
background:url("../images/cover-blue-nodots.svg"), -webkit-linear-gradient(87deg, #0577f4 0px, #53d3d4 100%);

- Arslan Chaudhary