Javascript SVG动画笔划dashoffset在IE中-笔划宽度为0

我正在尝试使用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代码：

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

---

我尝试通过js添加笔划宽度，删除js中的超时，删除内圈覆盖，将笔划宽度作为属性直接添加到svg中，并按照以下建议手动设置动画：。最终的结果是SVG显示出来，但是在IE11和IE10中（不需要担心9和8），应该设置动画的白色笔划永远不会出现

看起来像一个IE错误-似乎与6px中风工作。是的，不幸的是我刚刚发现了。我看到动画发生了（耶！），但它只有在1px宽时才会这样做。JSFIDLE最多支持6个页面，但实际页面只支持1个。不管怎样，你不能在IE中转换svg元素（也许可以缩放它？），所以1px或6px是没有帮助的。缩放也是我的第一个想法，但后来发现在

路径上是行不通的，就像你提到的那样。可能唯一的选择是完全缩放svg，因为这似乎确实有效果。