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

Question

遇到了一个奇怪的问题，即IE 11中的圆上无法进行变换旋转。

您可以在任何其他浏览器中看到蓝色的进度条，但在IE 11和10中工作正常。

问题是蓝色条不在顶部开始。在IE 11中，您可以看到它从右边开始。

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