我做了一些搜索，但我不得不承认，我对 SVG 的经验为 0，我看过很多现代库，例如 Raphael、PaperJS、KineticJS、EaselJS，但我不知道什么适合目标在这里，甚至 CSS 关键帧也可以解决问题。
如能指出此问题，我们将不胜感激。
目标
在浏览器上，我想使用过渡类型将 svg1 动画化为 svg2 ease-out
约束
- 任何 javascript 库，如果需要的话
- 应该能够将每个元素关联到具有相同 ID 的其他元素
- 变形形状、路径、填充*、描边*、cx、cy、rc、ry
- 应该在当前的 Firefox 和 Chrome 上工作，IE 10 会很不错
- 应该适用于新手机，例如 iphone 5、nexus 4 和 7
- 体面的性能，即使在移动设备上也是如此
- 如果呈现为
<svg>则无关紧要或<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 你可以visualize here ，只需将代码粘贴到该区域即可。
我没有要显示的代码，我不想一开始就出错。我的直觉告诉我，最好的解决方案有 50% 的可能性不涉及然后逐一比较这些节点!
最佳答案
不得不提的是，2015 年为我们带来了几个相当不错的 svg morph 库:
- https://alexk111.github.io/SVG-Morpheus/
- http://greensock.com/morphSVG (可能是最好的，但你 必须购买他们的许可证)
- https://github.com/gorangajic/react-svg-morph (用于 react )
关于javascript - html5 如何将一个 SVG 变形或动画化为另一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14870014/