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

Question

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

示例如下：http://tympanus.net/Tutorials/InteractiveSVG/ 圆圈以g为单位，g必须在悬停和后退时从0.5缩放到1。 这个浏览器的最佳解决方案是什么？

Answer 1

是的，svg转换为css don在IE中工作。关于它的comprehensive article。 Gsap js是为了救援。我已经勾勒出一个小提示，展示如何将所有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%"})