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

Question

我的问题解释得很简单。我已经得到了情况的截图并 sn-p 一个 jsFiddle 代码。

我遇到的问题，在屏幕截图上清晰可见，圆形部分在 Chrome 浏览器中看起来很完美，但在 FireFox 和 Edge 等中，这些部分略有偏移。

在当前状态之前，我已将 r / cx / cy 属性设置为 css，但这也不兼容。我发现你必须将它们直接写到圆圈标签中。

我的意思是，有没有人遇到过这个问题，但是谁能解释为什么它不能按预期工作？

[编辑]感谢@Sphinxxx 回答 y 的基本问题不起作用。

是否有解决问题的技巧/解决方法？

---

截图：

此屏幕上的浏览器： 1.铬 2.火狐 3. 边缘

[UPDATE]（在当前版本的 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>

Answer 1

Edge 和 Firefox 在画圆时，笔画在圆心与自身相交时，显然都做错了。您的示例可以简化为：

<svg class="chart" width="320" height="340" viewBox="1 0 32 34">	
    <circle cx="16" cy="1"  r="8" stroke-width="15.5" stroke="green" stroke-dasharray="20 999" fill="none"></circle>
    <circle cx="16" cy="18" r="8" stroke-width="16"   stroke="blue"  stroke-dasharray="20 999" fill="none"></circle>
</svg>

绿色圆圈的笔触有点太细，无法到达中心，看起来像您预期的那样，中间有一个小洞。蓝色圆圈应该完美地缩小了这个差距，但不知何故以一种奇怪的方式超越：

问题可能与此有关：Paths: Stroking and Offsetting，但看起来不太一样。