嘿，刚好之前踩过IE11的SVG动画兼容坑，来给你详细梳理下：

一、IE11对这两个属性动画的支持情况 #

IE11支持stroke-dasharray和stroke-dashoffset属性本身，但有个关键限制：它不支持通过CSS @keyframes 或 transition 来为这两个属性添加动画效果。只有SVG原生的SMIL动画（即<animate>系列标签）能在IE11中驱动这两个属性的变化。如果你是用CSS写的动画，这就是它在IE11里失效的核心原因。

二、可行的兼容方案 #

1. 改用SMIL动画重写 #

把CSS动画逻辑转换成SVG内部的<animate>标签，这是最贴合IE11支持特性的方案。举个例子：
假设你原本的CSS动画是这样的：

.path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 2s linear infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

可以改成SMIL版本：

<path class="path" d="M10 10L90 90" stroke="black" stroke-width="2" fill="none">
  <animate
    attributeName="stroke-dashoffset"
    from="100"
    to="0"
    dur="2s"
    repeatCount="indefinite"
    fill="freeze"
  />
</path>

IE11对SMIL的支持比较完善，这样修改后动画就能正常渲染了。

2. 用JavaScript手动驱动动画 #

如果不想重构为SMIL，也可以用JS定时更新属性值来模拟动画，兼容性拉满。示例代码：

const targetPath = document.querySelector('.path');
const totalLength = targetPath.getTotalLength();
let currentOffset = totalLength;

function animateStroke() {
  currentOffset -= 2;
  if (currentOffset < 0) {
    currentOffset = totalLength;
  }
  targetPath.style.strokeDashoffset = currentOffset;
  requestAnimationFrame(animateStroke);
}

// 初始化dash参数
targetPath.style.strokeDasharray = `${totalLength} ${totalLength}`;
animateStroke();

IE11支持requestAnimationFrame和getTotalLength()，这段代码可以直接运行。

3. 可选Polyfill（谨慎使用） #

有些旧的polyfill比如smil.js可以补全IE11对SMIL的部分支持，但这类库大多已经停止维护。如果你的动画逻辑复杂，且不想手动写JS，可以尝试这类工具，但更推荐前面两种原生方案。

最后小提示 #

你之前核对特性表时，可能没注意到「CSS动画支持」和「属性本身支持」的区别——在特性查询工具里，会明确标注IE11不支持CSS驱动的stroke-dash属性动画，下次排查可以重点看这一项。

内容的提问来源于stack exchange，提问作者Volodymyr M. Yovchenko