title: Is it possible to apply css transitions on svg nodes? If yes, how?
body: <p>Let's say I have a simple circle and I want to scale it using CSS. This interaction would be done by listening to a click event on the circle and somehow adding a CSS class (the end frame animation class) to it. </p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
      &lt;circle class='main-circle' cx="100" cy="50" r="40" 
        stroke="black" stroke-width="2" fill="red"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Class name for this element is:</p>
  
  <pre><code>circleNode[0].className // SVGAnimatedString {animVal: "main-circle", baseVal: "main-circle"} 
  </code></pre>
  
  <p>jQuery attempt here:</p>
  
  <p><a href="http://jsfiddle.net/EHfej/" rel="nofollow">http://jsfiddle.net/EHfej/</a></p>
  
  <p>jQuery will not work in this case (see bug <a href="http://bugs.jquery.com/ticket/10329" rel="nofollow">http://bugs.jquery.com/ticket/10329</a>).
  className with plain dom nodes does not work either.</p>
  
  <p>My guess is that even though jQuery does not support class manipulations on SVG, it should still be possible. </p>