当用作背景图像时,svg不会出现在safari中

时间:2015-04-20 13:51:06

标签: css css3 svg

我有以下svg文件,我用作我的项目的背景图片,但它没有出现在safari(mac上的最新版本),我无法理解为什么因为它在其他浏览器中工作正常我测试

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="171px" height="129px" viewBox="0 0 171 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>Blue dolphin</title>
    <desc>Blue 8bit dolphin</desc>
    <g id="d-blue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <image id="dolphin_blue" sketch:type="MSBitmapLayer" x="0" y="0" width="171" height="129" xlink:href="data:image/png;base64,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"></image>
    </g>
</svg>

以这种方式使用它:

#elementId {
background-image: url(../img/dolphin_blue.svg);
background-size: 90px 68px;
position: absolute;
width: 90px;
height: 68px;
z-index: 1;
display: block;
}

1 个答案:

答案 0 :(得分:1)

使用绝对定位的div(class back-svg),即#elementId的子项,并将svg放入此div中。

CSS:

html,body {
  height:100%;
}
#elementId {
...
}
div.back-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

我在其他帖子中的小提琴:http://jsfiddle.net/k3v4by34/