CODEWITHSUNDEEP
javascripthtmlsvg
akhil.cs
akhil.cs

Reputation: 691

SVG Animation issue (svg blurring while zooming)

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

Answers (1)

helloanselm
helloanselm

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

Related Questions