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, K.neticJS, EaselJS but I have no idea of what would fit the goal here, maybe even CSS keyframes would do the trick.
Pointers to this problem would be greatly appreciated.
Goal
On the browser, I want to animate svg1 into svg2, using transition type ease-out
Constraints
<svg>
or <canvas>
svg1:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with 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 with 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 you can visualize here , by simply pasting the codes in the area.
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!
As far as I can see you only want to morph paths
This is a nice tutorial: SVG Essentials/Animating and Scripting SVG
W3C spec for SVG Paths: w3.org/TR/SVG/paths
W3C spec for animation: w3.org/TR/SVG/animate
Here's an example: carto.net/svg/samples/path_morphing
Have to mention that 2015 have brought us several pretty nice libraries for svg morph:
Indeed, there are quite a few libraries that allow svg morphing, as Darwin mentioned.
Some extras I've found were: snap.svg, KUTE.js, GSAP. Svg.js has a plugin for svg morph and I don't believe velocity.js has support for this yet.
paraphrasing:
Currently you have to use the same number of vertices in both path-elements , and they have to be of the same type and appear in the same order in the other path-description. You should also orient both polygons in the same direction (left-right and right-left would produce unwanted results).
So you can do it (see the link below for an example) but you need to plan it out so that you create shape A's path and shape B's path in the exact same way with identical curve types, points, etc.
Here's an example i made: animated svg path
I have the path on the right set as a mask of an image; it also animates.
If you can define the morphing as a list of changes instead of second SVG, you could use d3 http://d3js.org/ framework
It has a bit steep learning curve, but it gives you a lot of power. If you want something easier I suggest Raphael http://raphaeljs.com/ - capabilities are similiar, but it's easier to start.
Looking at a pure SVG option (ie. no Javascript) and building on the previous answers, here's a working example that might reduce the hairpulling for others.
<svg height="120px" width="120px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path>
<animate
dur="10s"
repeatCount="indefinite"
attributeName="d"
calcMode="spline"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
fill="freeze"
values="
M 336,0
c -97.2,0 -176,78.8 -176,176
c 0,18.7 2.9,36.8 8.3,53.7
c 0,0 0,0 -161.3,161.3
c -4.5,4.5 -7,10.6 -7,17
c 0,0 0,0 0,80
c 0,13.3 10.7,24 24,24
c 0,0 0,0 80,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 6.4,0 12.5,-2.5 17,-7
c 0,0 0,0 33.3,-33.3
c 16.9,5.4 35,8.3 53.7,8.3
c 97.2,0 176,-78.8 176,-176
C 512,78.8 433.2,0 336,0
Z
M 376,176.5
c -22.4,0 -40.5,-18.1 -40.5,-40.5
c 0,-10.5 4,-20 10.5,-27.2
c 7.4,-8.2 18.1,-13.3 30,-13.3
c 22.4,0 40.5,18.1 40.5,40.5
c 0,22.4 -18.1,40.5 -40.5,40.5
Z;
M 256,0
c -45,0 -85.8,15.8 -115.6,41.5
c -30.2,26.1 -49,62.4 -49,102.5
c 0,0 0,0 0,48
c 0,0 0,0 -18.3,0
c -35.3,0 -73.1,35.3 -73.1,64
c 0,0 0,0 0,192
c 0,35.3 32.8,64 73.1,64
c 0,0 0,0 78.9,0
c 0,0 0,0 104,0
c 0,0 0,0 107,0
c 0,0 0,0 75.9,0
c 40.3,0 73.1,-28.7 73.1,-64
c 0,0 0,0 0,-192
c 0,-35.3 -32.8,-64 -73.1,-64
c 0,0 0,0 -18.3,0
c 0,0 0,0 0,-48
c 0,-39.2 -17.9,-74.7 -47,-100.7
C 343.7,16.6 302.1,0 256,0
Z
M 164.6,192
c 0,0 0,0 0,-48
c 0,-44.2 40.9,-80 91.4,-80
c 50.5,0 91.4,35.8 91.4,80
c 0,0 0,0 0,48
c 0,0 0,0 24,0
Z;
M 336,0
c -97.2,0 -176,78.8 -176,176
c 0,18.7 2.9,36.8 8.3,53.7
c 0,0 0,0 -161.3,161.3
c -4.5,4.5 -7,10.6 -7,17
c 0,0 0,0 0,80
c 0,13.3 10.7,24 24,24
c 0,0 0,0 80,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 6.4,0 12.5,-2.5 17,-7
c 0,0 0,0 33.3,-33.3
c 16.9,5.4 35,8.3 53.7,8.3
c 97.2,0 176,-78.8 176,-176
C 512,78.8 433.2,0 336,0
Z
M 376,176.5
c -22.4,0 -40.5,-18.1 -40.5,-40.5
c 0,-10.5 4,-20 10.5,-27.2
c 7.4,-8.2 18.1,-13.3 30,-13.3
c 22.4,0 40.5,18.1 40.5,40.5
c 0,22.4 -18.1,40.5 -40.5,40.5
Z;
"/>
</path>
</svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.