使用JS或SVG和css设置圆形徽标的动画

我有一个圆形徽标，我正在尝试将其设置为动画，如以下示例所示：

。圆形图表{
显示：块；
利润率：10px自动；
最大宽度：80%；
最大高度：250px；
}
.圆圈{
冲程：#4CC790；
填充：无；
笔画宽度：2.8；
笔划线头：圆形；
动画：前进1秒，向前放松；
}
@关键帧进度{
0% {
笔划数组：0 100；
}
}

---

要从图中所示的位置开始动画，需要更改

笔划dasharray=“80,20”

并添加

stroke dashoffset=“-20”

我希望这就是你需要的

。圆形图表{
显示：块；
利润率：10px自动；
最大宽度：80%；
最大高度：250px；
}
.圆圈{
冲程：#F29105；
填充：无；
笔画宽度：2.8；
笔划线头：圆形；
动画：前进1秒，向前放松；
}
@关键帧进度{
0% {
笔划数组：0 100；
}
}

---

@Alexandr\TT给了你一个很好的答案。 这是我的，它是不同的：我正在为

stroke dashoffset

最初，

.circle

具有

笔划数组：100和<代码>行程偏移：100：t笔划不可见。
如果希望看到70%的路径笔划，则需要在动画结束时将
笔划dashoffset
设置为30（100-70=30）

这是一个工作示例：


。圆形图表{
显示：块；
利润率：10px自动；
最大宽度：20vw；
最大高度：20vw；
边框：1px实心#d9d9d9；
}
.圆圈{
冲程：#F29105；
填充：无；
笔画宽度：2.8；
笔划线头：圆形；
行程：100；
行程偏移：100；
动画：前进1秒，向前放松；
}
@关键帧进度{
100% {
行程偏移：30；
}
}
您尝试使用的动画技术仅适用于未填充的行

SVG（大概）是一个填充的轮廓形状。标准技术对此不起作用。您需要使用经过修改的方法

请查看以下答案，以找到适合您的方法：
这是一个数学解决方案，在每一帧中计算弧点并不困难：


设r1=90，r2=60，r3=20；
requestAnimationFrame（绘制）
函数图（t）{
设a=-t/300-Math.PI/2；
设s=Math.sin（a）；
设c=Math.cos（a）；
设largeArc=c<0？0:1；
t<1.4e3&&requestAnimationFrame（绘制）；
path.setAttribute（'d'`
M0，${-r1}
A${r1}，${r1}，0，${largeArc}，0，${c*r1}，${s*r1}
A${r3}，${r3}，0,0,0，${c*r2}，${s*r2}
A${r2}，${r2}，0，${largeArc}，1,0，${-r2}
A${r3}，${r3}，0,0,0,0，${-r1}
`);
}
body{margin:0；overflow:hidden；}

Codepen和您的代码——当转换为可运行的代码片段时——似乎以同样的方式制作动画。你的代码应该做什么？它没有做什么？你有一个经典的方法和解释是在一个较高的水平。我试图给出一个简洁的答案，但对版权代码的改动最少。你们都忽略了一个事实，即OPs形状显然不是一条简单的圆形路径我认为这是最接近的结果。如果我想提高速度，我应该怎么做？
t/600
在此减少分母这将增加圆的旋转。
@keyframes progress {
    100% {
    stroke-dashoffset: 30;
    }
    }