SVG <path>动画不能在Microsoft Edge上运行

Question

我想要完成的是使用SVG，圆圈和路径标记制作的Logo动画。

Correct rendering of the code on all major browsers apart from Microsoft Edge

Wrong rendering of the code on Microsoft Edge

我已经坚持这个问题两天了，我真的不明白为什么Microsoft Edge不能很好地渲染动画。

HTML：

<div class="introWrapper">
  <svg id="introAnimation" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500" preserveAspectRatio="none">
    <g>
      <circle id="loader" cx="250" cy="250" r="215" transform="rotate(180 250 250)" class="stroke loader"></circle>
    </g>
    <g id="logo">
      <path d="M137 436 L250 112 L365 436" fill-opacity="0" class="stroke"></path>
      <path d="M205 44 L205 402 L297 402" fill-opacity="0" class="stroke"></path>
    </g>
  </svg>
</div>

CSS：

.introWrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
}
.introWrapper svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.introWrapper svg .loader {
  stroke-dasharray: 1350.88px;
  stroke-dashoffset: 4052.62px;
  -webkit-animation: loaderAnimation 2000ms linear infinite;
  -moz-animation: loaderAnimation 2000ms linear infinite;
  animation: loaderAnimation 2000ms linear infinite;
}
.introWrapper svg .stroke {
  fill: none;
  stroke: #212121;
  stroke-width: 20px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.introWrapper svg path {
  display: none;
}
@font-face {
  font-family: FuturaPTLight;
  src: url("../assets/fonts/FuturaPTLight.otf") format("opentype");
}
@-moz-keyframes loaderAnimation {
  from {
    stroke-dashoffset: 4052.62px;
  }
  to {
    stroke-dashoffset: 1350.88px;
  }
}
@-webkit-keyframes loaderAnimation {
  from {
    stroke-dashoffset: 4052.62px;
  }
  to {
    stroke-dashoffset: 1350.88px;
  }
}
@-o-keyframes loaderAnimation {
  from {
    stroke-dashoffset: 4052.62px;
  }
  to {
    stroke-dashoffset: 1350.88px;
  }
}
@keyframes loaderAnimation {
  from {
    stroke-dashoffset: 4052.62px;
  }
  to {
    stroke-dashoffset: 1350.88px;
  }
}

JS：

$(window).on('load', function (e) {
  if (sessionStorage.getItem('websiteVisited') === null) {
    finishLoading(true);
    console.log('notVisited');
    sessionStorage.setItem('websiteVisited', true);
  }
  else {
    console.log('visited');
    finishLoading(false);
  }
});

function finishLoading(logoAnimation){
  var loader = $('#loader');

  var loaderPathLength = 2*(Math.PI)*$(loader).attr('r');
  var loaderStrokeDashOffset = $(loader).css('stroke-dashoffset').replace(/[^-\d\.]/g, '');

  if(loaderStrokeDashOffset >= 0){
    if(loaderStrokeDashOffset === 0){
      var missingTime = 2000;
    }else{
      var missingTime = 2000+((1000*loaderStrokeDashOffset)/loaderPathLength);
    }
  }else{
    var missingTime = 1000+(1000*(loaderPathLength-(Math.abs(loaderStrokeDashOffset)))/loaderPathLength);
  }
  var missingTime = (1000*loaderStrokeDashOffset)/loaderPathLength

  $(loader).css({
    'stroke-dasharray': loaderPathLength+'px',
    'stroke-dashoffset': loaderStrokeDashOffset+'px',
    'animation': 'animationS '+missingTime+'ms linear 1 forwards'
  });

  var cssAnimation = document.createElement('style');
  cssAnimation.id = 'intro';
  cssAnimation.type = 'text/css';

  var rules = document.createTextNode(
    '@-webkit-keyframes animationS{'+
      'from{stroke-dashoffset:'+ loaderStrokeDashOffset +'px;}'+
      'to{stroke-dashoffset: 0.1px;}'+
    '}'+
    '@-moz-keyframes animationS{'+
      'from{stroke-dashoffset:'+ loaderStrokeDashOffset +'px;}'+
      'to{stroke-dashoffset: 0.1px;}'+
    '}'+
    '@keyframes animationS{'+
      'from{stroke-dashoffset:'+ loaderStrokeDashOffset +'px;}'+
      'to{stroke-dashoffset: 0.1px;}'+
    '}'
  );

  cssAnimation.appendChild(rules);

  if(true){
    animateLogo(cssAnimation, missingTime);
  }

  document.getElementsByTagName("head")[0].appendChild(cssAnimation);
}

function animateLogo(cssAnimation, missingTime){
  $('#logo').children().each(function(i){
    var path = this;
    var pathLength = path.getTotalLength();

    missingTime = parseFloat(missingTime)+(i*1000)+500;

    $(this).css({
      'display':'inline',
      'stroke-dasharray': pathLength +'px',
      'stroke-dashoffset': pathLength +'px',
      'animation': '1000ms ease-in '+missingTime+'ms 1 forwards animation'+i
    });

    var rules = document.createTextNode(
      '@-webkit-keyframes animation'+ i +'{'+
        'from{stroke-dashoffset:'+ pathLength +'px;}'+
        'to{stroke-dashoffset:0.1px;}'+
      '}'+
      '@-moz-keyframes animation'+ i +'{'+
        'from{stroke-dashoffset:'+ pathLength +'px;}'+
        'to{stroke-dashoffset:0.1px;}'+
      '}'+
      '@keyframes animation'+ i +'{'+
        'from{stroke-dashoffset:'+ pathLength +'px;}'+
        'to{stroke-dashoffset:0.1px;}'+
      '}'
    );
    cssAnimation.appendChild(rules);
  });

}

提前感谢您的帮助。

[JSFiddle]（https://jsfiddle.net/mrkfuhw2/8/＆＃34; Microsoft Edge SVG动画错误＆＃34;）