IE中的SVG动画描边 - dashoffset - 描边宽度为0

Question

我试图使用SVG为圆形填充设置动画。它在Chrome，FF，Safari中运行得很漂亮，但在IE中动画不会发生。我使用jQuery动画（不是css动画，IE 11及以下版本不支持SVG）。

简化动画代码：

var animateSvg = function() {
  setTimeout(function(){
    $('#oil-can-svg .inner-circle').animate({'strokeDashoffset': 382});
  }, 1050); 
}

$document.ready(function() {
  animateSvg();
})

您可以在此处查看我的SVG代码： https://jsfiddle.net/ingridly/j09L5jLf/

问题似乎是IE没有渲染带有笔划的元素。一个线索是，如果在检查器中切换stroke-width属性，当您关闭类时，IE将首先以1px宽度的默认值渲染笔划，然后在您切换它时指定的宽度。

我尝试通过js添加笔画宽度，删除js中的超时，删除内圈叠加，将笔画宽度作为属性直接添加到svg上，并按照以下建议手动设置动画： Animate Path in Internet Explorer。最终的结果是SVG显示，但在IE 11和10中（不需要担心9和8），不会出现应该制作动画的白色笔画。