Javascript 如何使用SMIL/CSS在饼图/圆环图中按顺序设置多个SVG路径的动画

我有一个svg组，它包含一系列路径，这些路径表示饼图的不同区域。这些路径由一个圆圈标记进行转换，图形显示为一个圆环图

. 

正如Temani Afif所评论的那样，使用多路径不是好方法。我会这样做：

为了计算路径长度（155.53），我使用了JS&方法

getTotalLength

。我将路径计算为半径为33个单位的圆弧，从

3*Math.PI/4

开始，到

Math.PI/4

结束

动画在鼠标悬停时发生

svg{边框：1px实心；宽度：90vh}
#路径{
行程：155.53px；
行程偏移量：155.53px；
过渡：行程偏移。5s；
}
svg：悬停在路径上{
行程偏移：0px；
}

正如Temani Afif所评论的那样，使用多路径不是好方法。我会这样做：

为了计算路径长度（155.53），我使用了JS&方法

getTotalLength

。我将路径计算为半径为33个单位的圆弧，从

3*Math.PI/4

开始，到

Math.PI/4

结束

动画在鼠标悬停时发生

svg{边框：1px实心；宽度：90vh}
#路径{
行程：155.53px；
行程偏移量：155.53px；
过渡：行程偏移。5s；
}
svg：悬停在路径上{
行程偏移：0px；
}

---

按照常规方法，您没有要设置动画的笔划。因此，您可以将动画笔划线转换为遮罩。然后将该遮罩应用于更复杂的形状

#进度圈{
动画：进步无限；
}
@关键帧确实在进步{
0%{stroke dashoffset:0px；}
50%{stroke dashoffset:-146px；}
100%{stroke dashoffset:0px；}
}

---

按照常规方法，您没有要设置动画的笔划。因此，您可以将动画笔划线转换为遮罩。然后将该遮罩应用于更复杂的形状

#进度圈{
动画：进步无限；
}
@关键帧确实在进步{
0%{stroke dashoffset:0px；}
50%{stroke dashoffset:-146px；}
100%{stroke dashoffset:0px；}
}

我想使用多路径不是一个好方法。你可能应该考虑渐变色，而不是多路径，这不是我猜想的好方法。你应该考虑渐变色，谢谢，保罗。这是个好主意！我正在使用react，当组件更新时，动画将被剪切。如何通过屏蔽SMIL中的各个部分来实现这一点？我想要这样的东西：“我不知道你的意思。您的意思是想知道如何使用SVG动画元素（即

）？我指的是屏蔽每个单独的路径并使用动画。但我已经把大部分都弄明白了。我仍然好奇的是数组：146 192个数字。你是怎么想到的？基于弧的距离/周长？圆上的笔划dasharray和动画中的笔划dashoffset之间的关系是什么？192是半径为30.5的圆的周长。它实际上不需要那么大。那就好了。这是通过实验发现的。我旋转圆，使笔划起点与弧的起点（左端）匹配。然后调整数值，直到它覆盖整个弧。谢谢，保罗。这是个好主意！我正在使用react，当组件更新时，动画将被剪切。如何通过屏蔽SMIL中的各个部分来实现这一点？我想要这样的东西：“我不知道你的意思。您的意思是想知道如何使用SVG动画元素（即

）？我指的是屏蔽每个单独的路径并使用动画。但我已经把大部分都弄明白了。我仍然好奇的是数组：146 192个数字。你是怎么想到的？基于弧的距离/周长？圆上的笔划dasharray和动画中的笔划dashoffset之间的关系是什么？192是半径为30.5的圆的周长。它实际上不需要那么大。那就好了。这是通过实验发现的。我旋转圆，使笔划起点与弧的起点（左端）匹配。然后调整该值，直到它覆盖整个圆弧。