Question

我已经创建了一个SVG图像，但是当我尝试为容器设置动画时， svg图像在动画期间似乎是像素化的，并且一旦动画结束就变得很好，

我用于动画的代码，

var nContainer = document.getElementById('container');
function zoom () {
  nContainer.style.transform = 'scale(10)';
}

function reset () {
  nContainer.style.transform = 'scale(1)';
}

您可以从以下网址找到完整的源代码， http://codepen.io/anon/pen/qEazOX

是否有任何修复或替代方法来修复像素化问题？

Answer 1

只是为了确认：您是否在测试中使用Chrome？因为Firefox可以在不模糊矢量形状的情况下进行缩放。所以我认为这只是Chrome的行为。

最初我想过直接将图层提升到GPU（设置will-change属性或translate3d）可能有所帮助，但事实并非如此。我也尝试不在容器上设置缩放，但SVG本身也没有帮助。

但我找到了另一个解决方案：在SVG元素内部的形状周围创建一个包装器。它似乎有效并且不会让它变得模糊。当然，您需要以单独的方式相应地缩放容器。在我的测试中，这有效：http://codepen.io/anselmh/pen/qEazRV

请参阅HTML / SVG代码中的第3 + 4行，CSS和JS中的第12行。

SVG动画问题（缩放时svg模糊）

1 个答案: