SVG - IE11-10 Transform rotate doesn't appear

Question

Got an odd problem where transform rotate doesn't work on the circle in IE 11.

The progress bar in blue you can see works clearly in any other browser but in IE 11 and 10 it is working fine.

The problem is that the blue bar does not start at the top. In IE 11 you can see that it starts on the right.

JSfiddle: https://jsfiddle.net/o7sh7t45/

Javascript:

    var svgs = document.querySelectorAll('.progress__pie')

    if (svgs) {
        [].forEach.call(svgs, function (svg) { 
            let percentage = svg.getAttribute('data-pct')
            let val = parseInt(percentage)
            let bar = svg.querySelector('.bar')
            if (isNaN(val)) {
                val = 100
            } else {
                let r: any = bar.getAttribute('r')
                let circumference = Math.PI*(r*2)

                if (val < 0) {
                    val = 0
                }
                if (val > 100) {
                    val = 100
                }

                percentage = ((100-val)/100 * circumference)
                svg.querySelector('.svg').style.strokeDashoffset = percentage.toString()
                bar.style.strokeDashoffset = percentage.toString()
            }
        })
    } 

Answer 1

IE doesn't support CSS transforms on SVG elements. You would need to add the transform as an attribute on the SVG elements.

<circle ... transform="rotate(-90,100,100)" ../>