title: SVG animate path's d attribute
body: <p>Is it possible to use SVG to animate the <code>d</code> attribute of <code>&lt;path&gt;</code>?</p>
  
  <p>I can draw both a diamond and a circle as a path made of eight bezier curves:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        jQuery(function($){
          var a = 50;
  
          var draw = function(b, c, d, e, f){
            return [
              'M', a, 0, 
  
              'C', b, c, ',', d, e, ',', f, f,
              'C', e, d, ',', c, b, ',', 0, a,
  
              'C', -c, b, ',', -e, d, ',', -f, f,
              'C', -d, e, ',', -b, c, ',', -a, 0,
  
              'C', -b, -c, ',', -d, -e, ',', -f, -f,
              'C', -e, -d, ',', -c, -b, ',', 0, -a,
  
              'C', c, -b, ',', e, -d, ',', f, -f,
              'C', d, -e, ',', b, -c, ',', a, 0,
            ].join(' ');
          };
  
          $('#diamond').attr({ d: draw( 5*a/6,          a/6,                    2*a/3,         a/3,            a/2 ) });
          $('#circle' ).attr({ d: draw(     a, a*Math.PI/12, (2 + 1/Math.sqrt(2))*a/3, a*Math.PI/6, a/Math.sqrt(2) ) });
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;svg width="200" height="200"&gt;
        &lt;g transform="translate(100,100)"&gt;
          &lt;path id=diamond fill="blue" stroke="black"/&gt;
        &lt;/g&gt;
      &lt;/svg&gt;
      &lt;svg width="200" height="200"&gt;
        &lt;g transform="translate(100,100)"&gt;
          &lt;path id=circle fill="red" stroke="black"/&gt;
        &lt;/g&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'd like to animate the transformation from one to the other.</p>
  
  <p>I could simulate this in javascript (just by linearly interpolating the bezier curve parameters at certain times), but I want to know if there's a way to do it with SVG.</p>
  
  <p>(The circle and diamond are just an example - in reality I'd like to transition between two arbitrary solids made of the same number of bezier curves).</p>