Safari中的SVG缩放问题

Question

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

对于可能发生的情况有什么想法吗？

- Brandon Durham

---

可能与此错误 https://bugs.webkit.org/show_bug.cgi?id=82645 有关，该错误似乎与 Webkit 不想“破坏”SVG的固有纵横比有关。您的图标是否与包含元素具有相同的纵横比？ - Chris Bentley

嗨，Chris。没错，我正在以SVG创建时完全相同的大小进行渲染。 - Brandon Durham

Answer 1

好的，解决方法是在SVG元素中添加preserveAspectRatio="xMinYMin none"。

<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">

- Brandon Durham

---

请注意，“xMinYMin none”是无效的语法。请参见http://stackoverflow.com/a/20563983/109374。 - Erik Dahlström

preserveAspectRatio="none" 在这里对我起作用了。添加 xMinYMin 没有起作用。 - Envious