Javascript 消除SVG循环元素上的别名

我正在制作一个动态SVG饼图。基本上我有两个SVG元素，第一个得到

边界半径

的

50%

，第二个是一个我填充到特定值的圆。最后，这使得一个圆高于另一个圆，它们都有相同的尺寸

有一种SVG别名似乎很难消除。它在圆圈的顶部、左侧、底部和右侧“角落”都非常明显，至少在谷歌浏览器上是如此

这里是HTML部分

<figure id="pie" data-percentage="60">
  <div class="receiver"></div>
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision"/>
  </svg>
</figure>

下面是我对这个问题更准确的描述。我尝试了各种解决方案，包括shape rendering SVG属性，但都没有成功

这是一个屏幕截图，别名不像代码笔中那么明显（至少对我来说）

完整svg百分比圆 我以前也遇到过这个问题： 当您修改具有边框半径的元素时，会发生这种情况。
你可以在上面的链接答案中找到答案， 但我认为，如果只使用/修改svg，性能和美学都会更好

例如：

var circ=document.getElementsByClassName（“pie2”）；
var text=document.getElementsByClassName（“text”）；
text=文本[0]；
circ=circ[0]；
var maxvalue=320；
var值=最大值；
var-stop=false；
功能增加（）{
如果（值>0）{
circ.style.strokedashcoffset=值--；
text.textContent=Math.abs（Math.floor（（value/maxvalue）*100）-100）+“%”；
}否则{
clearInterval（intervalid）；
}
}
var intervalid=设置间隔（增加，25）
.pie{
填充：无；
冲程：#222；
笔画宽度：99；
}
.pie2{
填充：无；
笔画：橙色；
笔画宽度：100；
行程：320；
行程偏移：320；
}
.文本{
字体系列：Arial；
字体大小：粗体；
字号：2em；
}

0%
在Chrome 42.0.2311.135上对我来说很不错，也许它也值得包括一个屏幕截图。我添加了一个。顺便说一下，我在几台电脑上看到了这个问题。这不是极端的别名，所以一开始可能很难看到啊，这让我想起了这个问题（不是dub）谢谢，这是我想到的（双圈法）。虽然仍然可以看到一些粗糙的边缘，但比以前好多了。我不确定在技术上是否有可能进一步减少别名无法编辑我的评论：我忘了将黑色圆圈的笔划宽度更改为99，效果更好谁知道一个1单位的差异就能解决问题？如果可以，你是如何得到320作为笔划dasharry和笔划dashoffset值的？我正在使用getTotalLength（）。