在Edge中对SVG进行动画处理

Question

我们正在远离这种方法，但我只是想找出我做错了什么。

这是我拥有的SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 792 158.7" style="enable-background:new 0 0 792 158.7;" xml:space="preserve">
  <style type="text/css">
    @keyframes magglass {
      from {
        transform: translate(-125px, 0);
      }
      to {
        transform: translate(60px, 0);
      }
    }
    #mag-glass-root {
      animation-duration: 6s;
      animation-iteration-count: infinite;
      animation-name: magglass;
    }
  </style>
  <g id="mag-glass-root">
   <ellipse class="pink-pig-3" cx="327.5" cy="53" rx="3.5" ry="3"/>
  </g>

</svg>

在Chrome浏览器中，此操作从左向右移动。在Edge中，它是固定的。

根据this page，MS Edge支持CSS转换动画。我做错了什么？