我的问题解释得很简单。我已经得到了情况的截图并截取了一个 jsFiddle 代码。
我遇到的问题在屏幕截图上清晰可见，圆形部分在 Chrome 浏览器中看起来很完美，但在 FireFox 和 Edge 等中，这些部分略有偏移。
在当前状态之前，我已将 r / cx / cy 属性设置为 css，但这也不兼容。我发现您必须将它们直接写入圆形标签。
有没有人遇到过这个问题，我的意思是，但谁能解释为什么它不能按预期工作？
[编辑]感谢@Sphinxxx 回答 y 的基本问题不起作用。
是否有解决问题的技巧/解决方法？
截屏：
此屏幕上的浏览器： 1. Chrome 2. FireFox 3. Edge
[更新]（在当前版本的 FireFox 中，该问题已修复）
- 现在我们只在 Edge 浏览器中遇到这个问题
这里的代码示例：
const duration = 1200
Array.from(document.getElementsByClassName('count')).forEach(el => {
const target = parseInt(el.innerText)
const step = (duration / target)
const increment = step < 10 ? Math.round(10 / step) : 1
let current = 0
console.log(el.innerText + ': ' + step)
el.innerText = current
window.addEventListener('load', _ => {
const timer = setInterval(_ => {
current += increment
if (current >= target) {
el.innerText = target
clearInterval(timer)
} else
el.innerText = current
}, step)
})
})
function getlength(number) {
return number.toString().length;
}svg.chart {
width: 100px;
border-radius: 50%;
background: yellowgreen;
transform: rotate(-90deg);
animation: grow-up cubic-bezier(0, 0, 0.18, 1) 2s;
animation-delay: 0.3s;
}
.chart > circle {
fill: none;
stroke-width: 32;
}
.chart > circle.first {
stroke: deeppink;
}
.chart > circle.second {
stroke: mediumpurple;
}
.chart > circle.third {
stroke: #fb3;
}
.chart > circle.fourth {
stroke: #ce3b6a;
}
.legend-list li{
width: 40%;
}
.legend-list span.glyphicon {
color: yellowgreen;
}
.legend-list .first span.glyphicon {
color: deeppink;
}
.legend-list .second span.glyphicon {
color: mediumpurple;
}
.legend-list .third span.glyphicon {
color: #fb3;
}
.legend-list .fourth span.glyphicon {
color: #ce3b6a;
}
svg circle {
animation: rotate-in cubic-bezier(0, 0, 0.18, 1) .7s;
animation-delay: 0.3s;
transform-origin: 50% 50%
}
@keyframes rotate-in {
from {
opacity: 0;
stroke-dashoffset: 30;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
@keyframes grow-up {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<svg class="chart" viewBox="0 0 32 32">
<!-- circle zero from 0 to 100 for filling yellowgreen --> <!-- 75 - 100 = 25 % -> realy 0 - 100 background color -->
<circle class='fourth' stroke-dasharray="75 100" r="16" cx="16" cy="16"></circle> <!-- 60 - 75 = 15 % -->
<circle class='third' stroke-dasharray="60 100" r="16" cx="16" cy="16"></circle> <!-- 40 - 60 = 20 % -->
<circle class='second' stroke-dasharray="40 100" r="16" cx="16" cy="16"></circle> <!-- 30 - 40 = 10 % -->
<circle class='first' stroke-dasharray="30 100" r="16" cx="16" cy="16"></circle> <!-- 0 - 30 = 30 % -->
</svg>