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

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

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

为此，必须更改

stroke dasharray

属性的参数

圆的半径为

r=49

，总周长为

308

要使笔划从一个点对称消失，需要使用两组参数

stroke dasharray

values=“154,0 154,0；0,308,0,0”

其中

154

-第一组行程dasharray的dash参数

0

-第一组行程数组的间隙参数
因此，在动画的第一个瞬间，圆将被空洞填充

0,308,0,0

-在该值下，间隙的长度最大，圆的边界不可见

谢谢！很好！对于填充圆边界的示例，有没有办法避免在填充之前在右侧有小的残留（线的滑动）？@user9375050条纹实际上不会保留。这种视觉效果是由于动画的连续重复。要移除此错觉，需要在动画结束时添加暂停。现在我将添加一个暂停的示例。