Svg Rotation Animation Failing in Ie and Ff

SVG Rotation Animation Failing in IE and FF

This answer works on Firefox 40, Firefox 42 and Chrome.

svg.spinner {  display: block;  width: 50px;}svg.spinner path {  fill-opacity: 0;  stroke-width: 11;}svg.spinner path.track {  stroke: rgba(92, 112, 128, 0.2);}svg.spinner path.head {  stroke: rgba(92, 112, 128, 0.5);  stroke-linecap: round;  -ms-transform-origin: 50px 50px;  transform-origin: 50px 50px;  -webkit-animation: spin 2s linear infinite;  animation: spin 2s linear infinite;}@-webkit-keyframes spin {  from {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }  to {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }}@keyframes spin {  from {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }
  to {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }}

<svg class="spinner" viewBox="-50 -50 100 100">  <g transform="translate(-50, -50)" >  <path class="track" d="M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89"></path>  <path class="head" d="M 91.81632162497291 65.21989637799226 A 44.5 44.5 0 0 0 50 5.5"></path>  </g></svg>

SVG rotation in IE (all) fails

Here is a version using javascript. It just useres a timeout() to update a transform on the path.

    <h1>SVG spinner</h1>    <p>The javascript should be placed within the svg to maintain portability throughout different projects as we don't want to load all of the libraries required for a simple loading screen.</p><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   viewBox="0 0 251.3 136" enable-background="new 0 0 251.3 136" xml:space="preserve" onload="init(evt)"><script type="text/ecmascript"><![CDATA[
  var svgNS = "http://www.w3.org/2000/svg";
  function init(evt) {    addRotateTransform('spinner', 0);  }

  function addRotateTransform(target_id, angle) {    var my_element = document.getElementById(target_id);    var bb = my_element.getBBox();    var cx = bb.x + bb.width/2;    var cy = bb.y + bb.height/2;
    my_element.setAttribute("transform", "rotate("+angle+","+cx+","+cy+")");    window.setTimeout(function() {      addRotateTransform('spinner', angle+2);    }, 16);  }
]]></script><!-- The rest of the svg has been removed from here --><g>  <path id="spinner" opacity="0.6" fill="#ed1b1e" d="M228.4,82.8c7.5,1.3,15.1-2.5,18.5-9.3c3.7-7.4,1.2-16.8-5.8-21.2c-0.9-0.6-1.8-1-2.8-1.4    c-0.2-0.1-1-0.2-1.1-0.4c-0.1-0.1,0-1.1,0-1.3c-0.2-1.6-1.2-2.9-2.6-3.6c-1.3-0.7-2.6-0.5-4-0.4c-1.9,0.2-3.7,0.7-5.4,1.4    c-7.4,3.1-11.9,10.3-11.9,18.2C213.1,73.7,220,81.4,228.4,82.8z m-7.9,-15.6c-0.4-2,0.3-4.5,1.2-6.3c1.1-2.2,2.9-4,5.2-5.1    c1.9-0.9,3.7-0.9,5.7-1c2.2-0.1,4-1.6,4.5-3.7c5.8,2.3,9.7,8.3,9.2,14.6c-0.3,3.6-2,7-4.7,9.3c-2.8,2.4-5.9,3.2-9.5,3.2    c0.3,0-0.2,0-0.3-0.1c-0.6-0.1-1.2-0.1-1.8-0.3c-1.8-0.4-3.5-1.3-4.9-2.4C222.4,73.4,220.9,70.5,220.5,67.2    C220.4,66.8,220.5,67.4,220.5,67.2z"/></g></svg>

SVG animation fails in Firefox in a strange way

I fixed this in Firefox 35 via bug 1067375.

---

Related Topics