У меня есть SVG-графика рожка мороженого, и я хочу преобразовать шарик с помощью transform-origin из 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, просто работающий как положено, но пока браузеры не обновятся, это было для меня подходящей альтернативой.
