缩放时 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; }
}

下面是一个运行示例。