消除 SVG 圆形元素上的锯齿

Question

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

有些 SVG 别名似乎很难摆脱。它在圆圈的顶部、左侧、底部和右侧“角”上非常明显，至少在 Google Chrome 上是如此。

这里是 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>

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

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

Answer 1

完整的 svg 百分比圆

我之前也遇到过这个问题：Pixel edge on circle 当您使用边界半径修改 an 元素时会发生这种情况。
您可以在上面链接的答案中寻找答案， 但我认为如果你只使用/修改 svg，它的性能和美学都会更好。

例子：

var circ = document.getElementsByClassName("pie2");
var text = document.getElementsByClassName("text");
text = text[0];
circ = circ[0];
var maxvalue = 320;
var value = maxvalue;
var stop = false;

function increase() {
  if (value > 0) {
    circ.style.strokeDashoffset = value--;
    text.textContent = Math.abs(Math.floor((value / maxvalue) * 100) - 100) + "%";
  } else {
    clearInterval(intervalid);
  }
}

var intervalid = setInterval(increase, 25);

.pie {
  fill: none;
  stroke: #222;
  stroke-width: 99;
}
.pie2 {
  fill: none;
  stroke: orange;
  stroke-width: 100;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.text {
  font-family: Arial;
  font-weight: bold;
  font-size: 2em;
}

<figure id="pie" data-percentage="90">
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision" />
    <circle r="50" cx="100" cy="100" class="pie2" />
    <text class="text" x="80" y="110">0%</text>
  </svg>
</figure>