圆形和笔划破折号的跨浏览器SVG渲染问题

Question

我的问题很简单地解释了。我已经得到了有关情况的屏幕截图，并摘录了jsFiddle代码。

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

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

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

[编辑] ，谢谢@Sphinxxx回答y的基本问题。

  

是否存在用于解决该问题的hack /解决方法？

---

屏幕截图：

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

[更新] （在当前版本的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，但看起来不太一样。