Reputation: 691
I've created a SVG image, but when I tried to animate the container the svg image seems pixelated during the animation and becomes fine as soon as the animation finishes,
The code that i used for animation,
var nContainer = document.getElementById('container');
function zoom () {
nContainer.style.transform = 'scale(10)';
}
function reset () {
nContainer.style.transform = 'scale(1)';
}
You can find the full source code from the following url, http://codepen.io/anon/pen/qEazOX
Is there any kind of fixes or alternative methods for fixing the pixelation issue?
Upvotes: 1
Views: 1115
Reputation: 329
Just to confirm: Are you using Chrome in your testing? Because Firefox gets the zooming right without blurring the vector shape. So I think this is a Chrome only behavior.
Initially I thought about promoting the layer to the GPU directly (setting will-change
property or a translate3d
) could help but it doesn’t. I also tried to not set the scaling on the container but the SVG itself which doesn’t help either.
But I’ve found another solution: Create a wrapper around the shape inside the SVG element. It seems this works and does’t make it blurry. Of course you then need to scale the container accordingly in a separate way. In my tests this worked: http://codepen.io/anselmh/pen/qEazRV
Please see line 3+4 in HTML/SVG code, line 12 in CSS and JS.
Upvotes: 3