Animation doesn't seem to work in Firefox (latest version) Browser

[cumulustechnologies]

This is an excellent project but I've run into an issue where the SVG animation doesn't work in Firefox.

I did a google search and found that Firefox implements the SVG animation process more rigidly than Chrome and that values that start with a . (period) need to be replaced with 0. in order to work...

But I can't see where I would need to make the change, can you advise (or make a fix) for Firefox browsers?

Thanks

[anup-a]

@cumulustechnologies Thanks for pointing it out. I can reproduce the issue. I didn't notice it earlier since I never use firefox.

I will definitely try to fix it as soon as possible.

[cumulustechnologies]

Thanks a lot, would love to be able to use this going forward!

The issue also seems to exist in Safari and I imagine that the fix for one will work in both browsers. I did a search and apparently, Firefox is more strict in the way it interprets animation values inputs so this could be the issue with both browsers, but I am clueless on SVG animations so...

[anup-a]

I investigated this issue and apparently CSS svg path data is only supported on chrome.

property name d:path() is not implemented in Firefox or Safari. This is only working in Blink browsers.

Similar issue - webcompat/web-bugs#53814

W3C Discussion - w3c/svgwg#320

We will have to figure out an alternative cross browser solution.

[SkullMasher]

Hello there, I'm on Firefox v97.0 and everything works fine now

Thanks for the awesome tool !