How to fix a bug in EDGE with svg?

Question

css

How can I remove a couple of bugs during the animation of svg elements in EDGE. In other browsers (except IE) everything is fine, but here it somehow works wrong. Perhaps there are some hacks to remove this lawlessness from the eyes.

SVG box here

Answer 1

The old edge does not support the transform-box property, which is why it transform: rotate(XXdeg)doesn't work as intended. You can fix it using the old trick to rotate the object around the desired point https://developer.mozilla.org/en-US/docs/Web/API/C... (there is a method for canvas, but also works in svg).
Corrected the example .man-hand.

For the convenience of the calculation transform: translate, use the developer tools in chrome: select the one you need pathand enter in the console $0.getBBox().x + $0.getBBox().width/2- you will get the value for the shift along the X axis. Use the Y axis$0.getBBox().y + $0.getBBox().height/2