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

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