title: SVG animation using javascript not working in firefox
body: <p>I'm struggling with something that should be easy, let me explain :</p>
  
  <ul>
  <li>I have a SVG using the animateTransform tag I use JavaScript to
  change the form attribut </li>
  <li>then I use the beginElement()</li>
  </ul>
  
  <p>The SVG</p>
  
  <pre><code>&lt;svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"&gt;
      &lt;defs&gt;
          &lt;path id="right" fill="#F7931E" d="M55.002,30c0-13.808-11.192-25-25-25v6c10.477,0,19,8.523,19,19s-8.523,19-19,19v6 C43.81,55,55.002,43.808,55.002,30z"&gt;
              &lt;animateTransform id="rotate" attributeName="transform" type="rotate" from="0 30 30" to="180 30 30" begin="0s"  fill="freeze"/&gt;
          &lt;/path&gt;
  
          &lt;path id="left" fill="#F7931E" d="M11.002,30c0-10.477,8.523-19,19-19V5c-13.808,0-25,11.192-25,25s11.192,25,25,25v-6 C19.526,49,11.002,40.477,11.002,30z"&gt;
              &lt;animateTransform  id="rotate2" attributeName="transform" type="rotate" from="0 30 30" to="180 30 30" begin="0s"   fill="freeze"/&gt;
          &lt;/path&gt;
  
          &lt;mask id="hide-left"&gt;
              &lt;rect x="0" y="0" width="30" height="60" fill="white"/&gt;
          &lt;/mask&gt;
  
          &lt;mask id="hide-right"&gt;
              &lt;rect id="super" x="30" y="0" width="30" height="60" fill="white"/&gt;
          &lt;/mask&gt;
      &lt;/defs&gt;
  
      &lt;!-- Layout --&gt;
      &lt;use xlink:href="#right" mask="url(#hide-right)"/&gt;
      &lt;use xlink:href="#left" mask="url(#hide-left)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The JS</p>
  
  <pre><code>    var updateCircle= function (pourcentage) {
  
      if (pourcentage &lt; 0.5) {
          var angle = pourcentage * 2;
          var angle_vert = 180 * angle;
          var angle_rouge = 0;
      }
      else {
          var angle_vert = 180;
          var angle = (1 - pourcentage) * 2;
          var angle_rouge = 180 - (180 * angle);
      }
      $("#mod_countdown #right #rotate").attr('from', angle_vert + ' 30 30');
      $("#mod_countdown #left #rotate2").attr('from', angle_rouge + ' 30 30');
      $("#mod_countdown #right #rotate")[0].beginElement();
      $("#mod_countdown #left #rotate2")[0].beginElement();
  };
  </code></pre>
  
  <p>The example to play with : <a href="http://jsfiddle.net/oandcf08/2/" rel="nofollow">http://jsfiddle.net/oandcf08/2/</a></p>
  
  <p>My problem is : it's not working on firefox and I don't know why...</p>
  
  <p><strong>[edit]</strong></p>
  
  <p>Fun fact : when I add the attribute transform :  <code>&lt;path transform="scale(5)" ...</code> it's working in firefox check it out : <a href="http://jsfiddle.net/oandcf08/3/" rel="nofollow">http://jsfiddle.net/oandcf08/3/</a> , it's working but I don't understand why and it don't seem to be a reliable workaround</p>