Css 使用偏移路径的svg动画不符合预期

我正在尝试使用stroke dasharray和stroke dashoffset绘制一条线，这两种方法都很好

还需要沿路径绘制圆多视图

我在偏移路径中使用了相同的路径点。无论如何，圆都不会附着到直线上

有什么不对劲吗

.container，svg{
显示：块；
保证金：自动；
}
@关键帧绘制{
0%{stroke dashoffset:1250；}
100%{stroke dashoffset:0；}
}
@关键帧球{
从{
偏移距离：0%；
}
到{
偏移距离：100%；
}
}
svg{
@应用m-auto；
变换原点：中心；
变换：缩放（-1，-1）translateX（40px）；
}
.抽签{
行程：1250；
动画：画2s无限；
}
圈{
偏移路径：路径（'M9 315V207C9 179.386 31.3858 157 59 157H894.5C922.114 157 944.5 134.614 944.5 107V8'）；
偏移距离：0%；
动画：无限球；
}

---

当我添加

变换框：填充框时，它工作