Cross-Browser SVG rendering problems with circle and stroke-dasharray

Question

my problem is explained quite simply. I've gotten a screenshot of the situation and snippet a jsFiddle code.

The problem I have, is clearly visible on the screenshot, the circular sections look perfectly in the Chrome browser, but in FireFox & Edge etc. the sections are slightly offset.

Prior to the current status, I had set the r / cx / cy properties to css, but that was not compatible either. I found out that you have to write them directly into the circle tag.

Has anyone ever had the problem, I mean, but can anyone explain why it does not work as expected?

[EDIT] THANKS @Sphinxxx for answer the basic question of y doesn't work that.

Is there a hack / workaround to solve the problem?

---

Screenshot:

Browser on this Screen: 1. Chrome 2. FireFox 3. Edge

[UPDATE] (In the current version of FireFox that issue is fixed)

• Now we have that problem only in the Edge browser

Here to the code example:

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

Both Edge and Firefox clearly do something wrong when drawing circles where the stroke meets itself in the circle center. Your example can be simplified to this:

<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>

The green circle has a stroke that's just a little bit too thin to reach the center, and looks like you would expect, with a tiny hole in the middle. The blue circle should perfectly close that gap, but somehow overshoots in a strange way:

The problem might be related to this: Paths: Stroking and Offsetting, but doesn't quite look the same.