在Safari SVG缩放问题(SVG scaling issues in Safari)

在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的结果：

想法什么可能发生的？

Answer 1:

好了，所以修复是添加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">

文章来源: SVG scaling issues in Safari