title: SVG - IE11-10 Transform rotate doesn't appear to be working
body: <p>Got an odd problem where transform rotate doesn't work on the circle in IE 11. </p>
  
  <p>The progress bar in blue you can see works clearly in any other browser but in IE 11 and 10 it is working fine. </p>
  
  <p>The problem is that the blue bar does not start at the top. In IE 11 you can see that it starts on the right. </p>
  
  <p>JSfiddle:
  <a href="https://jsfiddle.net/o7sh7t45/" rel="nofollow noreferrer">https://jsfiddle.net/o7sh7t45/</a></p>
  
  <p>Javascript: </p>
  
  <pre><code>    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 &lt; 0) {
                      val = 0
                  }
                  if (val &gt; 100) {
                      val = 100
                  }
  
                  percentage = ((100-val)/100 * circumference)
                  svg.querySelector('.svg').style.strokeDashoffset = percentage.toString()
                  bar.style.strokeDashoffset = percentage.toString()
              }
          })
      } 
  </code></pre>