Safari中的SVG缩放问题 [英] SVG scaling issues in Safari

问题描述

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

Strange issue occurring in Safari. I'm setting the background of an element to be an SVG. This SVG was drawn on a tight pixel grid and appears in most every other browser perfectly, but for some reason it's scaling incorrectly in Safari.

这里是SASS我使用设置背景：

Here is the SASS I'm using to set the background:

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

...和创建的CSS：

... and the CSS that creates:

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

我尝试将background-size设置为99.9％，它帮助了一点，

I tried setting the background-size to 99.9% and it helped a bit but made it blurry in every browser.

以下是Chrome和Safari中的结果：

Here are the results in Chrome and Safari:

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

Ideas as to what might be happening?

推荐答案

好，所以修复是添加 preserveAspectRatio =xMinYMin none到SVG元素。

Okay, so the fix was to add preserveAspectRatio="xMinYMin none" to the SVG element.

< svg version =1.1id =Layer_1xmlns =http：// www .w3.org / 2000 / SVG的xmlns：的xlink =http://www.w3.org/1999/xlink×=0像素Y =0像素
宽度=35px高度= 28px视框=0 0 35 28使背景=新0 0 35 28XML：空间=保存preserveAspectRatio =xMinYMin无>

这篇关于Safari中的SVG缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！