我正在制作动画 SVG 饼图。基本上我有两个 SVG 元素,第一个得到 50%
的 border-radius
,第二个是我填充到特定值的圆。最后,这使得一个圆在另一个圆之上,它们都具有相同的尺寸。
有某种 SVG 别名似乎很难消除。它在圆圈的顶部、左侧、底部和右侧“Angular ”非常明显,至少在 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 属性,但无济于事。
这是一个屏幕截图,别名不像代码笔中那么明显(至少对我而言)
最佳答案
完整的 svg 百分比圆
我之前也遇到过这个问题:Pixel edge on circle
当您使用 border-radius 修改 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>
关于javascript - 消除 SVG 圆形元素上的别名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34332615/