为啥在 webkit 浏览器下缩放 SVG 会变得模糊？

Posted 2023-03-06

【中文标题】为啥在 webkit 浏览器下缩放 SVG 会变得模糊？

【英文标题】：Why does SVG get blurred when scaled under webkit browsers?为什么在 webkit 浏览器下缩放 SVG 会变得模糊？

【发布时间】：2014-12-18 05:35:42

【问题描述】：

使用 CSS 缩放变换缩放 SVG 图像时，图像在 Chrome 或 Safari 下变得模糊？

这是我的一些代码：

        #logo 
            animation: cssAnimation 120s infinite;
            -webkit-animation: cssAnimation 120s infinite;
            -moz-animation: cssAnimation 120s infinite;
        

        @keyframes cssAnimation 
            0%  transform: scale(1) 
            50%  transform: scale(2) 
            100%  transform: scale(1); 
        

非常感谢您的帮助！

拉斐尔

【问题讨论】：

看看***.com/questions/26488179/…或***.com/questions/9986226/…是否回答了你的问题...

尝试使用width jsfiddle.net/victor_007/bw0fyu11

@War10ck 非常感谢！

@Vitorino Fernandes 谢谢，但宽度让动画跳动

我必须将 svg 徽标图像放大 200 倍，我得到的唯一解决方案是改用宽度，scale3d 不会有任何区别。

【参考方案1】：

非常感谢 War10ck！这篇文章帮助了我：when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border 使用 scale3d 而不是 scale，不超过 1，成功了！