Html CSS stroke dasharray不是一路走来的

我是一个完全的CSS初学者，试图制作一个简单的动画，其中笔划围绕字母移动。 这些字母在SVG中

动画可以工作，但是笔划没有从开始到结束，留下一个小但非常令人恼火的“空白”点

在上面的图片中，你可以非常清楚地看到我所说的地点。 下面是一段代码片段，它复制了这一点。 有没有办法让中风一直持续下去

*{
填充：0；
保证金：0；
}
身体{
宽度：100%；
高度：100vh；
背景色：黑色；
}
#标志{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#标志路径{
笔划阵列：2000；
行程偏移量：2000；
动画：直线动画4s轻松前进；
}
@关键帧线动画{
到{
笔划偏移：0；
}
}

---

您可以将路径延长一点以穿过间隙，或者使用

笔划线条帽

属性：

*{
填充：0；
保证金：0；
}
身体{
宽度：100%；
高度：100vh；
背景色：黑色；
}
#标志{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#标志路径{
笔划阵列：2000；
行程偏移量：2000；
笔划线头：圆形；
动画：直线动画4s轻松前进；
}
@关键帧线动画{
到{
笔划偏移：0；
}
}

---

您可以将路径延长一点以穿过间隙，或者使用

笔划线条帽

属性：

*{
填充：0；
保证金：0；
}
身体{
宽度：100%；
高度：100vh；
背景色：黑色；
}
#标志{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#标志路径{
笔划阵列：2000；
行程偏移量：2000；
笔划线头：圆形；
动画：直线动画4s轻松前进；
}
@关键帧线动画{
到{
笔划偏移：0；
}
}