动画半圆饼图上的CSS Z格斗

所以我找到了纯CSS制作的动画半圆饼图的codepen示例。我正试图用它来进行“政治席位分配”。如下图中图表边缘所示，基础饼图块的颜色从边缘穿过

我不确定这是否可以解决，如果可以，如何解决。这种效果在Chrome和Firefox中都可以看到，当我将高度和宽度从基于像素的值更改为vw单位时，效果会变得更糟

我还包括了原始代码段的编译CSS版本，下面有一个多弧示例

实现圆弧的css要点如下：

编辑：我把它改成了大众的。您可以在中间（黄色）弧的末端看到边缘问题，它显示了下面的绿色弧

.container{
显示：内联块；
利润率：30px 20px；
}
.container.label文本{
显示：块；
文本对齐：居中；
字体大小：20px；
字体大小：粗体；
边缘底部：15px；
}
.馅饼包装{
位置：相对位置；
宽度：80vw；
高度：40vw；
溢出：隐藏；
}
.pie wrapper.arc、.pie wrapper:之前{
内容：''；
宽度：80vw；
高度：40vw；
位置：绝对位置；
-ms变换原点：50%0%；
-webkit转换来源：50%0%；
变换原点：50%0%；
左：0；
框大小：边框框；
}
.馅饼包装器：以前{
边框：20vw实心#E8E8E8；
边框底部：无；
排名：0；
z指数：1；
边界半径：40vw 40vw 0；
}
.馅饼包装纸{
边框：20vw实心#47CF73；
边界顶部：无；
边界半径：0 0 40vw 40vw；
最高：100%；
z指数：2；
}
.馅饼包装纸.得分{
颜色：#394955；
字号：28px；
显示：块；
宽度：200px；
文本对齐：居中；
利润上限：70像素；
}
.arc[数据值=“24”]{
-moz动画：填充2s；
-webkit动画：填充2s；
动画：填充2秒；
-moz变换：旋转（43.2deg）；
-ms变换：旋转（43.2deg）；
-webkit变换：旋转（43.2deg）；
变换：旋转（43.2deg）；
过渡：所有5s轻松；
边框颜色：#47CF73；
}
.arc[data value=“24”]：之后{
内容：''；
位置：绝对位置；
左：-40px；
顶部：5px；
}
.arc[data value=“24”]：：之前{
背景色：#47CF73；
}
.arc[数据值=“65”]{
-moz动画：填充2s；
-webkit动画：填充2s；
动画：填充2秒；
-moz变换：旋转（117度）；
-ms变换：旋转（117度）；
-webkit变换：旋转（117度）；
变换：旋转（117度）；
过渡：所有5s轻松；
边框颜色：#47CF73；
}
.arc[data value=“65”]：之后{
内容：''；
位置：绝对位置；
左：-40px；
顶部：5px；
}
.arc[data value=“65”]：：之前{
背景色：#47CF73；
}
.arc[数据值=“100”]{
-moz动画：填充2s；
-webkit动画：填充2s；
动画：填充2秒；
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
过渡：所有5s轻松；
边框颜色：#47CF73；
}
.arc[数据值=“100”]：之后{
内容：''；
位置：绝对位置；
左：-40px；
顶部：5px；
}
.arc[data value=“100”]：：之前{
背景色：#47CF73；
}
.arc[数据值=“24”]{
边框颜色：#FF3C41；
}
.arc[data value=“24”]：：之前{
背景色：#FF3C41；
}
.arc[数据值=“65”]{
边框颜色：#FCD000；
}
.arc[data value=“65”]：：之前{
背景色：#FCD000；
}
.arc[数据值=“80”]{
边框颜色：#FCD000；
}
.arc[data value=“80”]：：之前{
背景色：#FCD000；
}
.传奇{
显示：内联块；
宽度：150px；
垂直对齐：文本底部；
左边距：100px；
背景色：#f0；
}
.图例span{
宽度：20px；
高度：20px；
显示：内联块；
利润率：0 10px 0 20px；
}
.图例span.green{
背景色：#47CF73；
}
.橙色{
背景色：#FCD000；
}
.图例span.red{
背景色：#FF3C41；
}
@-moz关键帧填充{
0% {
-moz变换：旋转（0度）；
变换：旋转（0度）；
边框颜色：#FF3C41；
}
50% {
-moz变换：旋转（180度）；
变换：旋转（180度）；
边框颜色：#47CF73；
}
}
@-webkit关键帧填充{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
边框颜色：#FF3C41；
}
50% {
-webkit变换：旋转（180度）；
变换：旋转（180度）；
边框颜色：#47CF73；
}
}
@关键帧填充{
0% {
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
边框颜色：#FF3C41；
}
50% {
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
边框颜色：#47CF73；
}
}

---

我很难看到，但我认为这可能有效

.pie-wrapper .arc { background-color: white; }

---

我改变了我原来的问题，使用大众的尺寸。你可以看到黄色弧线末端附近的外缘撕裂，下面显示1个绿色像素。我尝试了您的解决方案，但这只解决了弧内部的问题，而不是外部的问题。另外，我希望保持背景透明，因为在实际代码中，下面有一个图像背景。