Css 如何在不占用大量CPU的情况下为SVG路径上的无限标记移动设置动画？

我希望在D3图表的链接上实现流量指示器，如中所示

块使用stroke dashoffset关键帧CSS动画来实现流，虽然看起来不错，但CPU使用率几乎为100

我读到你可以通过包含某些CSS属性来欺骗某些浏览器触发GPU加速，但其他来源表明这不再有效，当然我在尝试添加

transform:translateZ（0）时看不到任何好处（例如）

我一直在研究其他的选择，我试图实现一个移动标记沿着一条线，在风格。因为只有一个标记的性能更好，但当我添加多个标记时，性能更差

在SVG路径上设置标记动画是否还有另一个性能更高的选项

如果另一种方法失败，我将尝试添加控件来停止/启动动画，但这将是最后的选择

提前谢谢
 设置
笔划dashoffset
属性的动画似乎确实会导致大量计算。当我在Firefox中打开原始示例时，它会导致CPU使用率达到50%左右

还有另一种方法似乎可以提供更好的结果：手动增加
行程dashoffset
并使用
setInterval
循环。以下是概念证明：


以下是更新dashoffset的方法：

var lines = d3.selectAll('.flowline');

var offset = 1; 
setInterval(function() {
  lines.style('stroke-dashoffset', offset);
  offset += 1; 
}, 50);  

我知道它看起来不是很好，但它（令人惊讶地）比依赖css动画或转换的性能要好得多。在Firefox中，我现在的CPU使用率约为15%

我可以想象，如果你有很多链接，这种方法不会表现得很好，因为更新会花费太长时间。但对于简单的用例来说，它可能是一种可行的方法，在这些用例中，你可以线性地设置固定数量的链接。
这是一个巨大的改进！我想我可以把这个修改一下。谢谢：）