Microsoft Edge/IE SVG 变换缩放动画不起作用
Microsoft Edge/IE SVG transform scale animation doesnt work
我在悬停时有 svg 比例动画，它在 Chrome/Firefox/Opera 中有效，
但它在 Edge/IE
中不起作用
示例如下：http://tympanus.net/Tutorials/InteractiveSVG/
圆圈在 g 元素中，g 必须在悬停和返回时从 0.5 缩放到 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%"})
我在悬停时有 svg 比例动画，它在 Chrome/Firefox/Opera 中有效， 但它在 Edge/IE
中不起作用示例如下：http://tympanus.net/Tutorials/InteractiveSVG/ 圆圈在 g 元素中，g 必须在悬停和返回时从 0.5 缩放到 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%"})