title: Smooth SVG animation
body: <p>I am trying to refresh the animation with the given parameter rotateX and rotateY:</p>
  
  <pre><code>$(document).ready(function() {
          var svg = document.getElementById("DC");
          var x = 10;
          var y = 0;
          for (j = 0; j&lt;8 ; j++) {
              svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;');
              x = x  + 10;
          }
      });
  </code></pre>
  
  <p>But it didn't work. How to refresh the animation smoothly ?</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;body&gt;&lt;svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" x="0px" y="0px" width="100%" height="100%" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;"&gt;&lt;style&gt;&lt;/body&gt;
  </code></pre>
  
  <p></p>