Ответ 1
Совсем недавно я столкнулся с той же проблемой; вот как я решил его решить:
Согласно эта страница в анимации SVG с CSS-преобразованиями, основные браузеры просто не согласуются с применением элементов transform-origin для SVG. Автор страницы создал платформу анимации JavaScript под названием GSAP и объясняет некоторые из ее расчетов transform-origin в статье. Хотя вы более чем можете использовать математику самостоятельно с JavaScript, чтобы исправить происхождение SVG, я взглянул на GSAP (в частности, инструмент TweenLite), и это в конечном итоге полностью соответствовало моим потребностям. Если вы используете внешнюю библиотеку на своем веб-сайте, я бы рекомендовал использовать его инструмент для анимации элементов SVG, поскольку он позволяет последовательно анимировать элементы во всех основных браузерах. Очевидно, что не рекомендуется transform-origin работать так, как предполагалось, но пока обновление браузеров, это было подходящей альтернативой для меня.