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