使用circle和stroke-dasharray的跨浏览器SVG渲染问题

Question

我的问题很简单。我已经获得了情况的截图，并获得了一个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>