title: Which framework allows us to animate the g tag in svg
body: <p>g tag receives it's own animate tag for certain animations. But it seems quite limited to be used for advanced animations. We have jQuery animate for animation which is quite useful, but we cannot exclusively use it to animate the g tag due to again, limitations. I would like to ask what other options do I have to animate the g tag assuming that it has some <code>id</code> or <code>classname</code> set to it. In <code>snap.svg</code> one can make use of the <code>svg</code> image and interpret it. I don't want to use that however. I prefer using the <code>svg</code> tag and keeping things simpler. See this <a href="http://jsfiddle.net/thomsebastin/9aogt124/" rel="nofollow">fiddle</a> where I want to apply animation to the cube. I am open to any frameworks, but just wanna know if this is possible and a normal method to be implemented. If yes, I would highly appreciate an answer with reference links and/or a sample code to properly implement the same. I have searched <code>SO</code> before asking this. Here is the code sample. I am not looking for CSS3 animations and transitions since <strong>IE9+</strong> is a must.</p>
  
  <p><strong>SVG</strong>  </p>
  
  <pre><code>&lt;svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;g id="cube"&gt;
  &lt;path id="f1" d="M190,200L260,160L330,200L260,240L190,200"&gt;&lt;/path&gt;
  &lt;path id="f2" d="M260,240L330,200L330,280L260,320L260,240"&gt;&lt;/path&gt;
  &lt;path id="f3" d="M260,240L260,320L190,280L190,200L260,240"&gt;&lt;/path&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>