Line Drawing - IE11 buggy rendering

[kh82]

Hello,

See attached files for two examples.

This is an icon of a lock, with the top curved part animating as a line drawing. This works in Chrome/Firefox but not IE11/Edge.
line-drawing-anime.zip

This is a world/phone icon. Partial / no animation in IE11 until the icon is clicked.
line-drawing-anime-2.zip

I have about a dozen of these icons, a lot of which have rendering issues in IE/Edge. Any help to diagnose this issue would be appreciated. Not sure if it's Animejs, bad SVG files or just IE being a pain.

Thank you

[juliangarnier]

Can you export your example to codepen? That way I can use online tools like crossbrowsertesting.com to test it on Edge (I'm on a mac OS).

Thanks!

[jeroenrinzema]

I created the two examples in codepen:

example 1:
https://codepen.io/jeroenrinzema/pen/VrWYVg

example 2:
https://codepen.io/jeroenrinzema/pen/EbXaeQ

[kh82]

Thank you for creating the codepen for me.

The SVG came from the client and we added classes to the parts we wanted to animate. I think our designer re-drew the top hook of the lock, and we reversed the points in the S of the dollar sign so it would animate top to bottom. I've tried exporting the SVGs from Illustrator (with different options) and Inkscape, but it's always buggy / not working.

It's also not working properly in Edge.

[GeorgesGITHUB]

Is this still a problem?

[kh82]

I no longer work at the company that was involved with this, I don't have access to the source code anymore and it was never enabled in a live environment because of this issue.I will close the thread, although I assume this will still be an issue for others if it hasn't been fixed by the latest versions.

Thank you