SVG背景在Safari中不显示 [英] SVG background not displaying in Safari

问题描述

在Firefox和Chrome中运行良好。 Safari只是不显示我的SVG背景图像。什么是交易？

HTML

 < div class =容器> 
< div class =row> 
< header class =span12 hero-unit> 
< h1>时间线< / h1> 
< / header> 
< / div> 
< div class =svg>< / div> 
< / div> 
  

CSS

  .svg {
 width：200px; 
 height：200px; 
 background-image：url（../ img / mars.svg）; 
 background-size：包含; 
} 
  

链接

http://distantfuturejosh.com/timeline/

解决方案

好的，我的问题是一个图形软件问题，而不是网络代码问题。但为了记录，我正在做的是在Illustrator中打开psd光栅并将其保存为svg。 Erik指出，这只是将一个PNG嵌入svg中。为了解决这个问题，我只是在illustrator中选择了对象，选择了Object> Image Trace> Make。然后，我选择了我的首选图像跟踪预设（6种颜色）并将其保存为svg。精美的作品。

Works fine in Firefox and Chrome. Safari just doesn't display my SVG background image. What's the deal?

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/

解决方案

Ok, my problem was a graphics software issue, not a web code problem. But for the record, what I was doing was opening a raster psd in Illustrator and saving it as an svg. That just embedded a png inside an svg as Erik pointed out. To fix this, I simply selected the object in illustrator, chose Object > Image Trace > Make. Then I selected my preferred image tracing preset (6 colors) and saved that as an svg. Works beautifully.

这篇关于SVG背景在Safari中不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！