消除SVG圆形元素上的锯齿效果

Question

消除SVG圆形元素上的锯齿效果

8

我正在制作一个动画SVG饼图。基本上我有两个SVG元素，第一个得到了border-radius为50％，第二个是一个圆形，我将其填充到特定的值。最终，这使得一个圆在另一个圆上面，它们都具有相同的尺寸。

似乎有一种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。我尝试了多种解决方案，包括shape-rendering SVG属性，但都没有成功。

这是一张屏幕截图，锯齿效果不像在codepen中那么明显（至少对我来说）。

- Antonin Cezard

在我的Chrome 42.0.2311.135上看起来很好，也许值得包含一张截图。 - Ian

我添加了一个。顺便说一下，我在几台电脑上都看到了这个问题。这不是极端的混叠，所以一开始可能很难看到。 - Antonin Cezard

啊，这让我想起了一个问题（不是配音）进度条。 - Persijn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Persijn · Accepted Answer

完整的svg百分比圆

我以前也遇到过这个问题：圆形边缘像素化当你修改一个有border-radius属性的元素时，就会出现这种情况。
你可以参考上面链接中的答案，但我认为如果你只使用/修改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>