Как починить баг в EDGE'е с svg?

Question

[LolExtasy]

Как можно убрать пару багов в ходе анимации svg элементов в EDGE. В остальных браузерах (кроме IE) все хорошо, а вот тут оно как-то работает не так. Возможно есть какие-то хаки убрать этот беспредел с глаз.

SVG'шка тут

Comments

[Ankhena]

Версию эджа уточните

[LolExtasy]

Ankhena, Microsoft Edge 44.18362.1.0

Answer 1

[RAX7]

Старый edge не поддерживает свойство transform-box из-за чего transform: rotate(XXdeg) работает не так, как было задумано. Пофиксить можно используя старый трюк для вращения объекта вокруг нужной точки https://developer.mozilla.org/en-US/docs/Web/API/C... (там метод для канвас, но также работает и в svg).
На примере поправил .man-hand.

Для удобства вычисления transform: translate используй инструменты разработчика в хроме: выдели нужный path и в консоле введи $0.getBBox().x + $0.getBBox().width/2 - получишь значение для сдвига по оси X. По оси Y используй $0.getBBox().y + $0.getBBox().height/2

Comments

[LolExtasy]

Большое спасибо ;)