Search code examples
angularanimationsvgweb-animations

SVG animate Web animate API

I create an animation for the project using "Web Animations API". In chrome everything works fine. But to yet in mazilla and safar there. Safari simply skips this animation. But mazilla makes a critical mistake.

enter image description here

The essence of the error is that I manipulate the elements of the svg element.

enter image description here

Yes, I know that this can only be done with the SVG2 standard. But maybe there is another solution, polyfills ...

I tried r, attr.r...

Thank you for any help.

Solution

  • Thanks to everyone for the tips the problem solved. Tip: Do not try manipulate the properties of SVG elements until releaseSVG 2.0 standard. (working only Chrome correctly) For myself, I replace the attribute "R" by the Transfrom property: scale (). + a lot of documents that I readed say about optimization and need manipulate the properties of transfrom.