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