为什么当在WebKit浏览器缩放SVG得到模糊？ [英] Why does SVG get blurred when scaled under webkit browsers?

问题描述

在使用CSS尺度变换缩放SVG图像，图像被Chrome或Safari下模糊？

When scaling an SVG image using CSS scale transform, the image gets blurred under Chrome or Safari?

下面是一个有点我的code的：

Here is a bit of my code:

        #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); }
        }

任何帮助非常感谢！

Many thanks for any help!

拉​​斐尔

推荐答案

非常感谢War10ck！这篇文章帮助我：<一href=\"http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t\">when缩放与CSS3规模的一个元素，它变得像素化，直到刚过动画完成。我用动画边框元素
使用scale3d而不是规模，不会超过1，采用的伎俩！

Thanks a lot War10ck! This article helped me: 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 Using scale3d instead of scale, not going over 1, made the trick!

这篇关于为什么当在WebKit浏览器缩放SVG得到模糊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！