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

Question

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

我可以使用stroke-dasharray并设置偏移量(https://css-tricks.com/svg-line-animation-works/#article-header-id-4)的动画，但据我所知，笔划的线性渐变本质上表现为整个形状，而不仅仅是笔划片段(https://codepen.io/plava/pen/BjavpN)。

有没有一种方法可以让我沿着另一条路径滑动一条线？这样我就可以对这条线单独应用渐变了。我的线条是从左向右移动的，类似于正弦波曲线，所以如果梯度没有随着线条弯曲，那也没问题。

这是一个电子应用程序的一部分，所以它只需要与较新版本的Chromium兼容即可。

Answer 1

一种方法是使用具有不同长度和不同不透明度的多个路径。只要短划线数组具有相同的总长度，并且短划线数组的第一个元素加上短划线数组的第一个元素对于每个路径的值相同，则短划线的末端将位于相同的位置：

#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个路径，从而创建一个很好的效果。

Answer 2

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

​

<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>

​