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.

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

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.

2 Answers
2

I'm afraid that's not Firefox returning that error but Angular. The Web Animations API requires that browsers only read properties that they can animate or which are custom properties. Properties they cannot animate must be silently ignored. As a result Firefox silently ignores any attempt to animate the 'r' property using the Web Animations API.

However, Angular does its own validation which is what you're encountering here.

I'd recommend re-tagging your question as an Angular question or just switching to using the Web Animations API directly.

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.