Css 如何使渐变线段沿SVG路径移动

我有一个动画，我想在HTML5文档上制作。我想让一些短线段沿着路径移动。线段应具有渐变，以便前部不透明，尾部淡出至完全透明

我可以使用

笔划dasharray

并设置偏移（）的动画，但就我所知，笔划的线性渐变基本上对整个形状起作用，而不仅仅是笔划段（）

有没有一种方法可以让我把一条线沿着另一条路滑下去？这样我就可以对这条线单独应用一个梯度。我的直线从左向右移动，有点像一条正弦波一样的曲线，所以如果梯度没有随着直线弯曲，那就可以了

---

这是Electron应用程序的一部分，因此它只需要与Chromium的最新版本兼容。

一种方法是使用具有不同长度破折号和不同不透明度的多条路径。只要短划线阵列具有相同的总长度，并且短划线偏移量加上短划线阵列的第一个元素对于每个路径都是相同的值，则短划线的端点将位于相同的位置：

#path {
    stroke-dasharray: 10 90;
    animation: dash 5s linear alternate infinite;
    stroke: black;
    stroke-width: 5;
}
#path2 {
    stroke-dasharray: 20 80;
    animation: dash2 5s linear alternate infinite;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 5;
}
@keyframes dash {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes dash2 {
    from {
        stroke-dashoffset: 110;
    }
    to {
        stroke-dashoffset: 10;
    }
}

不断添加更多css有点麻烦，因此我在这里使用一些javascript自动创建css：

---

这把小提琴自动创建了32条路径，产生了很好的效果。

以下是我如何做到这一点的：