svg变焦时模糊

Question

我创建了一个svg图像，现在问题是我试图使用css3动画为该图像设置动画

@keyframes animate {
    from {transform: scale(1);}
    to {transform: scale(10);}
}

但是动画期间图像模糊，动画后立即变好。

是否有任何解决方案可以在动画期间不模糊图像？

Answer 1

所有元素都会发生这种情况，无论它们是否为SVG。浏览器不会重新计算尺寸等，直到元素完成动画制作。

您可以尝试通过添加translate3d(0,0,0)或translateZ(1px)来强制GPU渲染它，但我不确定这是否真的有助于渲染。

因此，您应该将初始值设置为较小的值，然后设置为scale(1)的动画。在您的情况下，较小的值将是scale(.1)

Answer 2

您可以尝试设置动画宽度和高度，而不是变换。

@keyframes zoomSize {
    from { width: 30px; height: 30px; }
    to {width: 300px; height: 300px; }
}

这是一个正在运行的example。