【问题标题】:.svg image blurry at specific zoom levels in ChromeChrome 中特定缩放级别的 .svg 图像模糊
【发布时间】:2012-12-19 17:42:10
【问题描述】:

我已决定将我的网站徽标设为 svg,但它似乎在 chrome 中渲染效果不佳。在 100% 缩放级别,它看起来很模糊,但如果我缩小几次,它看起来还不错。这是我使用它的网站:

www.confide.re/confide

有谁知道这可能是什么原因以及如何解决它?谢谢

我在 Illustrator CS5 中制作了 svg,如果这很重要的话。

【问题讨论】:

  • 你试过放大in看看发生了什么吗?
  • 您的徽标非常清晰,并且 100% 看起来不错。如果不丢失抗锯齿或绘制位图图像,您将无法变得更好。

标签: html css xml google-chrome svg


【解决方案1】:

原因是您使用百分比来设置徽标所在元素(父元素)的宽度

这意味着徽标首先从矢量光栅化为内部位图,该位图是您为图像设置的大小的 100%。然后在您的#header css 规则中,您将 80% 用于图像所在的标题元素。

发生的情况是浏览器用来保存光栅化矢量图像的内部位图从 100% 缩放到 80%,而不是重新光栅化矢量。由于这涉及插值,因此会导致一些模糊的边缘。这是浏览器针对父级内容做出的性能选择。

解决办法是去掉header(父)元素的80%缩放。您可以添加新规则并像这样设置图像宽度(您当然可以改用百分比 - 只要父元素没有缩放,这不会是问题) - f.ex:

#header {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    /*width: 80%;*/
}

.header-img {
    width:200px;
    height:auto;
    }

然后在您的 html 代码中:

<img class="header-img" src="logo.svg" alt="" />

(您可以设置#header img {...},但这会降低性能)。

这是概念验证(100% 到 80% 的微小差异,但可见 - 比较最后一部分):

使用 100% 光栅化位图将徽标大小按浏览器缩放到 80%:

从标题(父)元素中删除 80% 并且为了示例将图像宽度设置为 200px:

【讨论】:

  • 谢谢,我希望它根据屏幕尺寸进行缩放(对于移动设备)——有什么方法可以使用 px 和 % 吗?
  • 我也用解决方案更新了我的答案。当然,随意调整宽度 - 我只是输入一个初始值开始。
  • @PassKit FireBug 是你的朋友 ;)
【解决方案2】:

我认为您的 SVG 没有问题,因为它是 100% 矢量(没有嵌入的 PNG 文件)。

最可能的原因是您的图像尺寸相对较小,以及它以 72 dpi(常规屏幕像素密度)呈现的方式。字体的不规则边缘被像素化,导致图像看起来有些模糊。

在高分辨率 MacBook Pro 和 iPhone Retina 上,您的徽标看起来精致而清晰。

它也可以放大。

【讨论】:

    【解决方案3】:

    将此代码放在使用 Panzoom 的页面上:

    <style>
            .panzoom {
                -webkit-backface-visibility: initial !important;
                -webkit-transform-origin: 50% 50%;
            }
    </style>  
    

    【讨论】:

    • 这解决了我们的类似问题。谢谢!现在很高兴了解修复的原因 :) 你碰巧知道吗?
    猜你喜欢
    • 2016-03-15
    • 2016-09-27
    • 2015-08-14
    • 2016-10-20
    • 2020-12-09
    • 2014-06-07
    • 1970-01-01
    • 1970-01-01
    • 2012-11-07
    相关资源
    最近更新 更多