css - Microsoft Edge/IE SVG 变换缩放动画不起作用

Question

我在悬停时有 svg 比例动画，它适用于 Chrome/Firefox/Opera，但它在 Edge/IE 中不起作用

示例如下:http://tympanus.net/Tutorials/InteractiveSVG/圆圈在 g 元素中，g 必须在悬停和返回时从 0.5 缩放到 1。这种浏览器的最佳解决方案是什么？

Answer 1

是的，通过 css 的 svg 转换在 IE 中不起作用。有一个comprehensive article关于它。 Gsap js 来拯救。我画了一个 fiddle 来展示如何将所有 css 样式(如过渡和转换)传输到 Tweenmax 命令 demo .我还注意到应该仔细复制 transformOrigin，因为嵌套元素的定位方式与通过 css 设置 transformOrigin 时的定位方式不同。

#coffee {transform-origin: 517px 484px;}

=

TweenMax.set("#coffee",{transformOrigin:"517px 484px"});

但是

#coffee-badge {transform-origin: 445px 488px;}

=

TweenMax.set("#coffee-badge",{transformOrigin:"100% 50%"})