我想在 HTML5 文档上制作动画。我想让一些短线段沿着一条路径移动。线段应该有渐变，这样前面是不透明的，而尾部则淡出到完全透明。
我可以使用stroke-dasharray 并为偏移设置动画 (https://css-tricks.com/svg-line-animation-works/#article-header-id-4)，但据我所知，笔画的线性渐变基本上对整个形状都有作用，而不仅仅是笔画段 (https://codepen.io/plava/pen/BjavpN)。
有没有一种方法可以让我沿着另一条路径滑动一条线？这将让我单独对那条线应用渐变。我的线条从左向右移动，有点像正弦波一样的曲线，所以如果渐变不随线条弯曲就可以了。
这是 Electron 应用程序的一部分，因此它只需要与最新版本的 Chromium 兼容。
【问题讨论】：
一种方法是使用具有不同长度破折号和不同不透明度的多条路径。只要 dash 数组的总长度相同，并且 dashoffsets 加上 dash 数组的第一个元素对于每条路径的值相同，那么 dash 的末端将位于相同的位置：
#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：https://jsfiddle.net/aqwg7ed6/
那个小提琴会自动创建 32 条路径，效果很好。
【讨论】：
我是这样做的：
<svg id="group-01" width="1668" height="1527" viewBox="0 0 1668 1527" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="loop-01" d="M 417.00,-648.50 C 647.03,-648.50 833.50,-462.03 833.50,-232.00 833.50,-232.00 833.50,253.00 833.50,253.00 833.50,483.03 647.03,669.50 417.00,669.50 417.00,669.50 417.00,669.50 417.00,669.50 186.97,669.50 0.50,483.03 0.50,253.00 0.50,253.00 0.50,-232.00 0.50,-232.00 0.50,-462.03 186.97,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 417.00,-648.50 Z" />
<path id="loop-02" d="M 1250.00,-648.50 C 1480.03,-648.50 1666.50,-462.03 1666.50,-232.00 1666.50,-232.00 1666.50,253.00 1666.50,253.00 1666.50,483.03 1480.03,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1250.00,669.50 1019.97,669.50 833.50,483.03 833.50,253.00 833.50,253.00 833.50,-232.00 833.50,-232.00 833.50,-462.03 1019.97,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 1250.00,-648.50 Z" />
<path id="loop-03" d="M 418.00,670.50 C 648.03,670.50 834.50,856.97 834.50,1087.00 834.50,1087.00 834.50,1572.00 834.50,1572.00 834.50,1802.03 648.03,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 418.00,1988.50 187.97,1988.50 1.50,1802.03 1.50,1572.00 1.50,1572.00 1.50,1087.00 1.50,1087.00 1.50,856.97 187.97,670.50 418.00,670.50 418.00,670.50 418.00,670.50 418.00,670.50 Z" />
<path id="loop-04" d="M 1251.00,670.50 C 1481.03,670.50 1667.50,856.97 1667.50,1087.00 1667.50,1087.00 1667.50,1572.00 1667.50,1572.00 1667.50,1802.03 1481.03,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1251.00,1988.50 1020.97,1988.50 834.50,1802.03 834.50,1572.00 834.50,1572.00 834.50,1087.00 834.50,1087.00 834.50,856.97 1020.97,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 1251.00,670.50 Z" />
<radialGradient id="fade-01" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#80D2B5" stop-opacity="1" offset="0" />
<stop stop-color="#0D1115" stop-opacity="0" offset="1" />
</radialGradient>
<radialGradient id="fade-02" cx="0" cy="0" fx="0" fy="0" r="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#5332D5" stop-opacity="1" offset="0" />
<stop stop-color="#0E1216" stop-opacity="0" offset="1" />
</radialGradient>
<mask id="tail-01" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-01">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-02" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-02">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-03" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-03">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
<mask id="tail-04" maskUnits="userSpaceOnUse">
<use style="fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100% -100%" xlink:href="#loop-04">
<animate attributeName="stroke-dashoffset" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
</use>
</mask>
</defs>
<g style="mask:url(#tail-01)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-01" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-02)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-02" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-03)">
<circle style="fill:url(#fade-02);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-03" />
</animateMotion>
</circle>
</g>
<g style="mask:url(#tail-04)">
<circle style="fill:url(#fade-01);" cx="0" cy="0" r="200">
<animateMotion keyPoints="0;1" keyTimes="0;1" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#loop-04" />
</animateMotion>
</circle>
</g>
<rect x="833.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="834.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="1.5" y="670.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
<rect x="0.5" y="-648.5" width="833" height="1318" rx="416.5" stroke="white" stroke-opacity="0.08" />
</svg>【讨论】：