使用 SVG 为圆形边框设置动画的具体方法？

Question

我有一个我想要的带有 SVG 圆圈的特定动画。我从这个问题（Animated semicircles in logo with SVG）中找到了下面的代码。它让我走了一半的路，但我不知道如何让它走完剩下的路。我希望圆圈开始展开，可以说是从左侧到右侧。此代码正确启动动画，但我需要它继续运行，直到没有更多的圆圈。也就是说，灰线应该像现在一样继续消失，顶部的消失速度与底部的消失速度相同。我该怎么做？

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="a" attributeName="stroke-dasharray" values="154 0;77 154;" dur="1s" repeatCount="indefinite"/>
    </circle>
</svg>

Answer 1

也就是说，灰线应该像现在一样不断消失， 顶部以与底部相同的速度消失。我该怎么办 这个？

为此，您必须更改stroke-dasharray 属性的参数。

圆的半径为r = 49，总周长为308

用两条线从一点开始对称消失，需要用到两组参数stroke-dasharray

values="154, 0 154, 0; 0, 308, 0, 0" 在哪里

154 - 第一组stroke-dasharray的dash参数
0 - 第一组stroke-dasharray的gap参数
结果，在动画的第一刻，圆圈将被一个空腔填充。

0, 308, 0, 0 - 在这个值下，间隙的长度最大，圆的边框变得不可见

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="a" attributeName="stroke-dasharray" values="154, 0  154, 0; 0, 308, 0, 0" dur="2s" repeatCount="indefinite"/>
    </circle>
</svg>

从一点填充圆的边框的示例

values="0, 154 0, 154; 0, 0, 308, 0"

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="a" attributeName="stroke-dasharray" values="0, 154  0,  154; 0, 0, 308, 0" dur="2s" repeatCount="indefinite"/>
    </circle>
</svg>

更新
@User9375050 的评论：

有没有办法避免留下那么小的残留物（一条线的滑行） 填满之前在右边？

条纹实际上并没有保留。这种视觉效果是由于动画的不断重复。为了消除这种错觉，你需要在动画的最后添加一个暂停

示例 1 在动画结束时有暂停

begin="0s;an.end+1s"哪里
第一个动画开始 -0s;
an.end+1s - 在第一个动画结束后暂停 1 秒后重新开始动画

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="an"
           attributeName="stroke-dasharray"
           values="
           154, 0  154, 0;
           0, 308, 0, 0"
           dur="2s"
           begin="0s;an.end+1s"
           repeatCount="1"
           fill="freeze"/>
    </circle>
</svg>

带停顿的示例 2

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" stroke-dashoffset="154" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="an"
          attributeName="stroke-dasharray"
          values="0, 154  0,  154; 0, 0, 308, 0"
          begin="0s;an.end+1s"
          dur="2s"
          repeatCount="1"
          fill="feeze"/>
    </circle>
</svg>