Clever Geek Handbook

IE 11 SVG animation smoothness

I have a big problem with SVG smoothness in IE 11 (works fine in Chrome).

It should work like a real time timeline. The SVG element dynamically increases its height, events show the time in it and are reset all the time. The problem is that 1px moving elements are visible and look bad.

In Chrome I solved this problem by adding transform: rotate(360deg)

(now I also have scale()

) that activated anti-aliasing for those elements and now it works smoothly there.

The animation on IE is not smooth, unfortunately. I have tried positioning the elements as x

/ y

and translate()

. The position is calculated exactly every time an animation frame is requested. This is more noticeable on bitmaps included in (or I think so). I tried to use shape-rendering

, text-rendering

(for text) image-rendering

for these images as well.

There is a simple JSFiddle: http://jsfiddle.net/9ke74mqo/

Does anyone have any other idea?

thank

+3


source to share


1 answer


If anyone is interested, I just decided. The problem is that in IE there is no way to enable anti-aliasing using any element property svg

. When I packed everything into an element <g transform="rotate(360)" />

everything just works fine.



+1


source






More articles:


All Articles