Почему не срабатывает transform-origin в IE и Edge?

Question

[Ольга Ветер]

Не могу понять в чем дело... По caniuse поддержка есть, префикс для гарантии указан, но свойство не работает в указанных браузерах.

Есть вот такая вот анимация vetero4eg.github.io/Demo/prorok.html

для точек нужный центр указан..
-webkit-transform-origin: 131px 77px;
-ms-transform-origin: 131px 77px;
transform-origin: 131px 77px;

что не так?

пыталась задавать transformOrigin через TweenMax но тогда не работает вообще везде...
указывала так TweenMax.set('.dot', {transformOrigin: "131px 77px"});

Answer 1

[Ivan Bogachev]

По caniuse поддержка есть

Ну вообще-то не совсем, там есть сноска №1, где говорится, что IE и Edge "Does not support CSS transforms on SVG elements".

для точек нужный центр указан..

Уберите его из CSS и используйте матрицу вместо scale:

TweenLite.from("...", 1.5, { transform: "matrix(0, 0, 0, 0, 131, 77)" });

Comments

[Ольга Ветер]

спасибо вам огромное!

Answer 2

[profesor08]

Потому что надо делать на canvas, а не выворачивать себе мозги, пытаясь сделать на svg и css. В IE и Edge плохая поддержка svg, и для SVG не работает transform-origin. Смирись и ищи обходной путь. Хоть каждую точку по отдельности аниммируй.

Comments

[zooks]

Логотип на Canvas - не лучшее решение. Пусть в IE просто не будет анимаций, либо fallback на статичный SVG сделать.