摆脱SVG圆形元素上的锯齿

我正在制作动画SVG饼图.基本上我有两个SVG元件,所述第一获取一个border-radius的50%,第二个是,我填充到一个特定的值的圆.最后,这使得一个圆圈位于另一个圆圈之上,它们都具有相同的尺寸.

有一种似乎很难摆脱的SVG别名.它在圆圈的顶部,左侧,底部和右侧"角落​​"非常明显,至少在Google Chrome上是如此.

这是HTML部分

这是我的codepen,可以更准确地描述问题.我尝试了各种解决方案,包括形状渲染SVG属性但无济于事.

这是一个截图,别名不像在codepen中那样可见(对我来说至少)