title: How to animate SVG?
body: <p>I'd like to use the <strong>jQuery</strong> "<code>animate</code>"-call to animate a SVG.</p>
  
  <p><em>The SVG should get for example rotated or or scaled.</em></p>
  
  <hr>
  
  <p>What I've tried so far was this simple code but obviously this is not working so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#svg").animate({
    transform: "scale(0.4)"
  }, 400)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg"&gt;
  &lt;svg width="100%" height="100%"&gt;
      &lt;svg width="100%" ID="piece" y="0" x="0" class="black" height="100%"&gt;
          &lt;g transform="translate(0.005) scale(0.022)"&gt;
              &lt;path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " /&gt;
          &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>I also added this line <code>$("#svg").css({transform: "scale(0.4)"})</code> to try if the <code>scale</code> style will be applied on the element, and however - <strong>this is working</strong>.</p>
  
  <hr>
  
  <blockquote>
    <p>How can I fix this issue why I'm not be able to animate the SVG element? Any help would be very appreciated, thanks.</p>
  </blockquote>