SVG - IE11-10变换似乎不起作用。

Question

得到了一个奇怪的问题，在IE11中，变换旋转在圆上不起作用。

蓝色的进度条可以在任何其他浏览器中清楚地工作，但是在IE 11和10中它工作得很好。

问题是蓝色条形图不是从顶部开始的。在IE11中，你可以看到它从右边开始。

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不支持SVG元素上的CSS转换。您需要将转换作为SVG元素的属性添加。

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