title: html5 How to morph or animate one SVG to another?
body: <p>I did some searching but I have to admit, I have 0 experience with SVG, I've seen a bunch of modern libraries, such as Raphael, PaperJS, KineticJS, EaselJS but I have no idea of what would fit the goal here, maybe even CSS keyframes would do the trick.  </p>
  
  <p>Pointers to this problem would be greatly appreciated.</p>
  
  <p><strong>Goal</strong><br>
  On the browser, I want to animate svg1 into svg2, using transition type <code>ease-out</code></p>
  
  <p><strong>Constraints</strong></p>
  
  <ul>
  <li>Any javascript library, if required at all</li>
  <li>Should be able to every element to the other element of same ID</li>
  <li>morph shapes, paths, fill*, stroke*, cx, cy, rc, ry </li>
  <li>Should work on current Firefox and Chrome, IE 10 would be nice to have</li>
  <li>Should work in new mobiles such as iphone 5, nexus 4 and 7</li>
  <li>Decent performance, even on mobiles</li>
  <li>Indifferent if it renders as <code>&lt;svg&gt;</code> or <code>&lt;canvas&gt;</code></li>
  </ul>
  
  <p>svg1:</p>
  
  <pre><code>&lt;svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --&gt;
   &lt;defs&gt;
    &lt;linearGradient id="svg_6"&gt;
     &lt;stop stop-color="#828236" offset="0"/&gt;
     &lt;stop stop-color="#7d7dc9" offset="0.99219"/&gt;
    &lt;/linearGradient&gt;
    &lt;linearGradient id="svg_7" x1="0" y1="0" x2="1" y2="1"&gt;
     &lt;stop stop-color="#828236" offset="0"/&gt;
     &lt;stop stop-color="#7d7dc9" offset="0.99219"/&gt;
    &lt;/linearGradient&gt;
    &lt;linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_1"&gt;
     &lt;stop offset="0" stop-color="#828236"/&gt;
     &lt;stop offset="0.99219" stop-color="#7d7dc9"/&gt;
    &lt;/linearGradient&gt;
   &lt;/defs&gt;
   &lt;g&gt;
    &lt;title&gt;Layer 1&lt;/title&gt;
    &lt;ellipse ry="145" rx="116" id="svg_2" cy="201" cx="317" fill-opacity="0.36" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="url(#svg_7)"/&gt;
    &lt;ellipse ry="21" rx="10" id="svg_5" cy="137" cx="274" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/&gt;
    &lt;ellipse ry="31" rx="17" id="svg_9" cy="114" cx="346" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/&gt;
    &lt;path id="svg_14" d="m235,239c55.66666,-1.33333 133.33334,-71.66667 167,-4l-167,4z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/&gt;
   &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>svg2:</p>
  
  <pre><code>&lt;svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --&gt;
   &lt;defs&gt;
    &lt;linearGradient id="svg_6"&gt;
     &lt;stop offset="0" stop-color="#828236"/&gt;
     &lt;stop offset="0.99219" stop-color="#7d7dc9"/&gt;
    &lt;/linearGradient&gt;
    &lt;linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_7"&gt;
     &lt;stop offset="0" stop-color="#828236"/&gt;
     &lt;stop offset="0.99219" stop-color="#7d7dc9"/&gt;
    &lt;/linearGradient&gt;
    &lt;linearGradient id="svg_1" x1="0" y1="0" x2="1" y2="1"&gt;
     &lt;stop stop-color="#828236" offset="0"/&gt;
     &lt;stop stop-color="#7d7dc9" offset="0.99219"/&gt;
    &lt;/linearGradient&gt;
   &lt;/defs&gt;
   &lt;g&gt;
    &lt;title&gt;Layer 1&lt;/title&gt;
    &lt;ellipse id="svg_2" fill="url(#svg_7)" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.36" cx="317" cy="201" rx="116" ry="145"/&gt;
    &lt;ellipse id="svg_5" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="277.5" cy="132.5" rx="13.5" ry="25.5"/&gt;
    &lt;ellipse id="svg_9" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="349.5" cy="110" rx="20.5" ry="35"/&gt;
    &lt;path id="svg_14" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m235,240c21.66666,81.66669 114.33334,96.33331 167,-4l-167,4z" /&gt;
   &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>ps</strong> you can <a href="http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html" rel="noreferrer">visualize here</a>, by simply pasting the codes in the  area.</p>
  
  <p>I have no code to show, I didn't want to start off wrong. My intuition tells me there is a 50% chance that the best solution don't involve navigating those nodes one by one diffing then!</p>