CODEWITHSUNDEEP
javascripthtmlcsssvg
MaxwellLynn
MaxwellLynn

Reputation: 968

SVG - IE11-10 Transform rotate doesn't appear to be working

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()
            }
        })
    }

Upvotes: 1

Views: 3221

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

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)" ../>

Upvotes: 5

Related Questions