title: SVG animate has no method
body: <p>I have an SVG (html):</p>
  
  <pre><code>    &lt;div&gt;
        &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
          &lt;g id="radius-selector"&gt;
            &lt;!-- Circle --&gt;
            &lt;circle id="radius-circle" cx="50%" cy="35%" r="25%" stroke="black" stroke-width="2" /&gt;
            &lt;!-- Radius ring --&gt;
            &lt;circle id="radius-ring" cx="50%" cy="35%" r="12.5%" stroke="green" stroke-width="10" fill="none"/&gt;
          &lt;/g&gt;
  
        &lt;/svg&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to transform the SVG, using JQuery to select it like this :</p>
  
  <pre><code>$('#radius-ring')[0].animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
  </code></pre>
  
  <p>but I keep getting the error in the console:</p>
  
  <pre><code>TypeError: Object #&lt;SVGCircleElement&gt; has no method 'animate'
  arguments: Array[2]
  get message: function () { [native code] }
  get stack: function () { [native code] }
  set message: function () { [native code] }
  set stack: function () { [native code] }
  type: "undefined_method"
  __proto__: Error
  </code></pre>
  
  <p>Do I need to actually install a plugin or library to animate the SVG?   I thought that you can achieve this?  If so I would appreciate a point in the right direction....</p>