Safari 中的 SVG 缩放问题

Posted

技术标签:

【中文标题】Safari 中的 SVG 缩放问题【英文标题】:SVG scaling issues in Safari 【发布时间】:2012-07-30 21:17:44 【问题描述】:

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

关于可能发生什么的想法?

【问题讨论】:

这可能与这个错误bugs.webkit.org/show_bug.cgi?id=82645 有关,这似乎与 webkit 不想“破坏”SVG 的固有纵横比有关。您的图标与包含元素的纵横比是否相同? 嗨,克里斯。确实如此。我以与创建 SVG 时相同的大小渲染它。 【参考方案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"
       viewBox="0 0 35 28" enable-background="new 0 0 35 28" xml:space="preserve" preserveAspectRatio="xMinYMin none">

【讨论】:

请注意xMinYMin none 是无效语法,请参阅***.com/a/20563983/109374。 preserveAspectRatio="none" 在这里为我工作。添加xMinYMin 无效。

以上是关于Safari 中的 SVG 缩放问题的主要内容,如果未能解决你的问题,请参考以下文章

Safari 和 Mobile Safari 中的内联 SVG 中断

Safari 中的 SVG 动画

Safari 中的插入符号问题与 contenteditable SVG

CSS背景中的SVG未显示在Safari中

Wheel 事件不会在 Safari 中的 SVG 组元素上触发

Safari中的SVG Fragment Sprite + CSS背景图像