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

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

1 个答案: