SVG 背景未在 Safari 中显示答案

【问题标题】：SVG background not displaying in SafariSVG 背景未在 Safari 中显示
【发布时间】：2013-10-16 22:27:46
【问题描述】：

在 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;
}

链接

http://distantfuturejosh.com/timeline/

【问题讨论】：

您知道distantfuturejosh.com/timeline/img/mars.svg 只是 svg 包装器中的 base64 编码的 png 图像吗？所以，你可以只使用 png 来代替。虽然它作为一个真正的矢量图形可能会非常小。我的猜测是 svg 背景中的数据 URI 在 Safari 中是不允许的（或有问题的）。
Erik，我怀疑我在 Illustrator 中没有正确保存文件！这就解释了为什么它只能扩展到某个点而不会损失质量。我想我需要在 Adobe 表单上发布，以了解如何实时跟踪光栅图像并将其转换为纯矢量 svg。
Erik，当你的评论被投票时，你会得到代表吗？当是你让我意识到我做错了什么时，我不想接受我的回答是正确的。但我也不希望这个问题无人回答......
请接受解决问题的答案，这对其他人也有帮助。不用担心代表。

标签： html css svg

【解决方案1】：

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

【讨论】：

【解决方案2】：

你试过这样去掉“-image”吗？

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

参考Using SVG as a background-image

【讨论】：

根据您的建议尝试删除 -image。还是不行:(
@wetjosh 您是否有任何其他版本的 safari / 运行 Safari 的机器来确认它不仅仅是一台机器？
好的，刚刚在运行 Safari 5（比当前版本旧的一个版本）的旧 Mac 上进行了测试，但仍然无法正常工作。不过感谢您的想法。

【解决方案3】：

我只是在搜索不适用于 Windows Safari 的 SVG 背景，经过大量搜索后，我发现了这个问题。我用线性渐变像这样

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%);

【讨论】：