SVG -

Question

は、IE 11

の円では動作しません回転を変換奇妙な問題を抱えて作業していないように回転を変換IE11-10あなたが作品をはっきりと見ることができる青でプログレスバー他のブラウザが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)" ../>