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

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