Html SVG箭头错误同步动画

为什么箭头不沿着直线开始？ 它不是同步的吗？ 我想让箭和线一起离开

.box{
宽度：100%；
填充：0px；
背景色：黑色；
}
斯奎格先生{
行程数组：498.181；
行程偏移：498.181；
动画：画10s线性无限；
}
@关键帧绘制{
从{
行程偏移：498.181；
}
到{
笔划偏移：0；
}
}

---

看看这个，这可能会有帮助：

#描述{
最大宽度：700px；
边缘顶部：100px；
颜色：#B3；
字体大小：11px；
字体系列：无衬线；
}
#李德士{
边缘底部：1米；
}
#描述p{
填充：20px 0 40px；
}
#双倍分离{
宽度：110px；
}
#双倍分离#在路径上{
填充：无；
行程：150；
笔划偏移：0；
动画：10秒显示线性无限向前；
}
@关键帧显示{
50%, 100% {
行程偏移：150；
}
}
#单独标记{
宽度：88px；
位置：相对位置；
顶部：-4px；
}
#单独的标记，只需一行{
填充：无；
笔划偏移：0；
动画：10秒显示2线性无限向前；
}
@关键帧显示2{
100% {
行程偏移：150；
}
}
#双分离标记{
宽度：110px；
}
#两个分开的标记，在小路上{
填充：无；
行程：150；
笔划偏移：0；
动画：3s显示3线性无限向前；
}
@关键帧显示3{
50%, 100% {
行程偏移：150；
}
}
#双分离标记-2{
宽度：110px；
}
#双分离标记-2#箭头3路径{
不透明度：0；
动画：10s revealarrow线性无限向前；
}
@关键帧显示箭头{
0%, 50% { 
不透明度：0；
}
60%, 100% {
不透明度：1；
}
}
#双分离标记-2.在路径上{
填充：无；
行程：150；
笔划偏移：0；
动画：10秒显示4线性无限向前；
}
@关键帧显示4{
50%, 100% {
行程偏移：150；
}
}
#分离标记-2{
宽度：88px；
位置：相对位置；
顶部：-4px；
}

“线”和“箭头”是两条组合在一起的路径，其顶部有一条相同（但宽且白色）的线路径，可通过动画显示
以箭头路径作为标记附着的直线路径。虚线偏移在直线路径上设置动画以添加移动
1和2的融合。以箭头作为标记的线路径，白色线路径在顶部设置动画。显示“路径+标记连接”比“路径+路径”平滑得多，并且“对接线帽”创建的动画效果比“方形”或“圆形”更平滑（尽管需要移动白色路径起点一两步才能覆盖标记）
第3节的改编。箭头SVG标记已应用CSS动画。因为它在线条路径完全可见之前不会出现，所以顶部的白色线条路径的笔划较窄，因为它不需要覆盖标记。动画计时通过关键帧百分比同步
原生SVG动画
免责声明：老实说，我不知道浏览器是否支持这些

我看到一个箭头在曲线上移动并“绘制”该曲线。“沿直线开始”和“一起离开”是什么意思？笔划dashoffset的结果取决于SVG的绘制方式。在我的问题中，我将更具体。我的动画似乎工作正常，但如果我刷新页面，有时箭头会向前或向后几个像素，我不明白为什么。这两个对象具有相同的运行时间10秒，路径长度是精确的，甚至标记都写得正确。我希望箭头和路径一起开始，并在整个路径中保持在一起。箭头代表正在使用www.DeepL.com/Translator（免费版）翻译的线的顶端。如果您对此答案添加一些解释，可能会有所帮助。我将在我的问题中更加具体。我的动画似乎工作正常，但如果我刷新页面，有时箭头会向前或向后几个像素，我不明白为什么。这两个对象具有相同的运行时间10秒，路径长度是精确的，甚至标记都写得正确。我希望箭头和路径一起开始，并在整个路径中保持在一起。箭头代表正在使用www.DeepL.com/Translator（免费版）翻译的线的顶端。我感谢您的方法。谢谢