为什么在 Webkit 浏览器下缩放 SVG 会模糊？

Question

使用CSS缩放变换(scale transform)来缩放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); }
        }

非常感谢任何帮助！

Raphaël

- RaphArbuz

---

请查看以下两个链接，看是否能解决您的问题：https://dev59.com/G4Tba4cB1Zd3GeqP6XfL 或 https://dev59.com/Kmkw5IYBdhLWcg3wUI1W - War10ck

尝试使用 width：http://jsfiddle.net/victor_007/bw0fyu11/ - Vitorino fernandes

@War10ck 非常感谢！ - RaphArbuz

@Vitorino Fernandes 谢谢，但是宽度使动画变得不流畅。 - RaphArbuz

我必须将一个SVG标志图像放大200倍，而我得到的唯一解决方案是使用宽度，scale3d不会有任何区别。 - user1455180

Answer 1

非常感谢War10ck！这篇文章帮了我很大的忙：当使用CSS3缩放元素时，它会变得像素化，直到动画完成后才恢复正常。我正在为一个有边框的元素添加动画效果。 使用scale3d而不是scale，并且不要超过1，就可以解决问题了！

- RaphArbuz