[英]SVG Animation issue (svg blurring while zooming)
我已经创建了一个SVG图像,但是当我尝试为容器设置动画时, svg图像在动画期间似乎是像素化的,并且一旦动画结束就变得很好,
我用于动画的代码,
var nContainer = document.getElementById('container');
function zoom () {
nContainer.style.transform = 'scale(10)';
}
function reset () {
nContainer.style.transform = 'scale(1)';
}
您可以从以下URL找到完整的源代码, http://codepen.io/anon/pen/qEazOX
是否有任何修复或替代方法来修复像素化问题?
只是为了确认:您是否在测试中使用Chrome? 因为Firefox可以在不模糊矢量形状的情况下进行缩放。 所以我认为这只是Chrome的行为。
最初我想过直接将图层提升到GPU(设置will-change
属性或translate3d
)可能会有所帮助,但事实并非如此。 我也尝试不在容器上设置缩放,但SVG本身也没有帮助。
但我找到了另一种解决方案:在SVG元素内部的形状周围创建一个包装器。 它似乎有效并且不会让它变得模糊。 当然,您需要以单独的方式相应地缩放容器。 在我的测试中,这工作: http : //codepen.io/anselmh/pen/qEazRV
请参阅HTML / SVG代码中的第3 + 4行,CSS和JS中的第12行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.