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