javascript - html5 How to morph or animate one SVG to another? -

javascript - html5 How to morph or animate one SVG to another? -

i did searching have admit, have 0 experience svg, i've seen bunch of modern libraries, such raphael, paperjs, kineticjs, easeljs have no thought of fit goal here, maybe css keyframes trick.

pointers problem appreciated.

goal on browser, want animate svg1 svg2, using transition type ease-out

constraints

any javascript library, if required @ all should able every element other element of same id morph shapes, paths, fill*, stroke*, cx, cy, rc, ry should work on current firefox , chrome, ie 10 nice have should work in new mobiles such iphone 5, nexus 4 , 7 decent performance, on mobiles indifferent if renders <svg> or <canvas>

svg1:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- created svg-edit - http://svg-edit.googlecode.com/ --> <defs> <lineargradient id="svg_6"> <stop stop-color="#828236" offset="0"/> <stop stop-color="#7d7dc9" offset="0.99219"/> </lineargradient> <lineargradient id="svg_7" x1="0" y1="0" x2="1" y2="1"> <stop stop-color="#828236" offset="0"/> <stop stop-color="#7d7dc9" offset="0.99219"/> </lineargradient> <lineargradient y2="1" x2="1" y1="0" x1="0" id="svg_1"> <stop offset="0" stop-color="#828236"/> <stop offset="0.99219" stop-color="#7d7dc9"/> </lineargradient> </defs> <g> <title>layer 1</title> <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)"/> <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"/> <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"/> <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"/> </g> </svg>

svg2:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- created svg-edit - http://svg-edit.googlecode.com/ --> <defs> <lineargradient id="svg_6"> <stop offset="0" stop-color="#828236"/> <stop offset="0.99219" stop-color="#7d7dc9"/> </lineargradient> <lineargradient y2="1" x2="1" y1="0" x1="0" id="svg_7"> <stop offset="0" stop-color="#828236"/> <stop offset="0.99219" stop-color="#7d7dc9"/> </lineargradient> <lineargradient id="svg_1" x1="0" y1="0" x2="1" y2="1"> <stop stop-color="#828236" offset="0"/> <stop stop-color="#7d7dc9" offset="0.99219"/> </lineargradient> </defs> <g> <title>layer 1</title> <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"/> <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"/> <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"/> <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" /> </g> </svg>

ps can visualize here, pasting codes in area.

i have no code show, didn't want start off wrong. intuition tells me there 50% chance best solution don't involve navigating nodes 1 1 diffing then!

as far can see want morph paths

this nice tutorial: http://commons.oreilly.com/wiki/index.php/svg_essentials/animating_and_scripting_svg

w3c spec svg paths: http://www.w3.org/tr/svg/paths.html

w3c spec animation: http://www.w3.org/tr/svg/animate.html

here's example: http://www.carto.net/svg/samples/path_morphing.shtml

javascript html5 animation svg