0

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.

MBT
  • 21,733
  • 19
  • 84
  • 102
Bohdan Sych
  • 51
  • 4
  • Without knowing anything about it, [mozdev](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API#Browser_compatibility) mentions [this](https://github.com/web-animations/web-animations-js) polyfill. – ccprog Aug 23 '18 at 13:01
  • unfortunately this does not solve my problem. – Bohdan Sych Aug 23 '18 at 13:38

2 Answers2

0

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.

brianskold
  • 809
  • 5
  • 10
0

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.

Bohdan Sych
  • 51
  • 4