Safari中的SVG扩展问题

时间:2012-08-01 22:15:13

标签: css safari svg

Safari中出现奇怪的问题。我将元素的背景设置为SVG。这个SVG是在一个紧密的像素网格上绘制的,并且完美地出现在大多数其他浏览器中,但由于某种原因,它在Safari中缩放不正确。

这是我用来设置背景的SASS:

@include background-size(100% 100%);
background: transparent image-url('icon-laptop.svg') no-repeat 0 0;

...以及创建的CSS:

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: transparent url('../images/icon-laptop.svg?1343856741') no-repeat 0 0;

我尝试将背景大小设置为99.9%并且它有所帮助,但在每个浏览器中都变得模糊。

以下是Chrome和Safari中的结果:

enter image description here

关于可能发生的事情的想法?

1 个答案:

答案 0 :(得分:9)

好的,所以修复是将preserveAspectRatio="xMinYMin none"添加到SVG元素。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="35px" height="28px" viewBox="0 0 35 28" enable-background="new 0 0 35 28" xml:space="preserve" preserveAspectRatio="xMinYMin none">