Css SVG无限动画无法正常工作 我已经创建了SVG无限动画，但是它运行得不顺畅，它被卡在中间，然后掉下来。解决了SVG中Illustrator中的节点问题，但之后我面临同样的问题。有人能帮我检查一下代码吗

.svg main{
宽度：700px；
保证金：30像素自动；
位置：相对位置；
}
svg#svga{
位置：绝对位置；
排名：0；
左：自动；
底部：自动；
右：自动；
}
.sd1{填充：无；笔划：#000000；笔划宽度：6；笔划线帽：圆形；笔划线连接：圆形；笔划斜接限制：10；}
.circ{fill:#000000；}
.st0{fill:#cccc；}
.st1{fill:#cccc；}
.st2{填充：无；笔划：#cccccc；笔划宽度：6；笔划斜接限制：10；}

---

通过

笔划dashoffset

动画获得流畅移动的第一个先决条件是以适当的精度知道路径的长度：

document.querySelector('#loop-normal').getTotalLength() // approx. 1910

省去

笔划dasharray

的动画。相反，将路径的总长度静态划分为一个破折号和一个间隙：

stroke dasharray=“200 1710”

。（只要总和等于1910，任何其他比例都有效。）

您的

属性。将其设置为“0；1”

只要不设置

calcMode=“spline”

，定义就没有效果。别管它了

剩下的部分有点简化：只定义一次路径，并将背景和动画使用放在同一个SVG中；在

笔划dashoffset

动画中指定正确的路径长度，以确保平滑移动；删除未使用的CSS

.svg main{
宽度：700px；
保证金：30像素自动；
位置：相对位置；
}
svg#svga{
位置：绝对位置；
排名：0；
左：自动；
底部：自动；
右：自动；
}
.st2{填充：无；笔划：#cccccc；笔划宽度：6；}
.sd1{填充：无；笔划：#000000；笔划宽度：6；笔划线帽：圆形；}
.circ{fill:#000000；}

请准确描述您希望仪表板末端如何移动。其长度是否应随时间变化您的

缺少

关键点

属性，并且定义

关键样条线

没有任何效果，只要您不设置

calcMode=“spline”

谢谢@ccprog，我只希望它不会停止一秒钟。它应该像在左侧一样继续旋转，但在右侧它会停止一段时间，然后继续旋转。我希望在右侧也有同样的旋转，这样尾巴在移动时就不会停止。再次感谢谢谢，我只想问一件事，你能帮忙吗，我想让dasharray（尾巴）像这个截图一样透明请看，如果可能的话请帮我。再次感谢。这是一个完全不同的问题。请问一个新问题。你能回答这个问题吗？