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

链接

http://distantfuturejosh.com/timeline/

Answer 1

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

Answer 2

你有没有试过这样离开“-image”？

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

参考Using SVG as a background-image

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

SVG背景不在Safari中显示

3 个答案: