html5 如何将一个 SVG 变形或动画化为另一个？

Question

我做了一些搜索，但我不得不承认，我对 SVG 的体验为 0，我见过很多现代图书馆，例如 Raphael、PaperJS、K.neticJS、EaselJS，但我不知道什么适合这里的目标，甚至 CSS 个关键帧也可以解决问题。

将不胜感激指向此问题的指针。

目标
在浏览器上，我想使用过渡类型ease-out将 svg1 动画化为 svg2

约束条件

• 任何 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你可以在这里可视化，只需将代码粘贴到该区域即可。

我没有要显示的代码，我不想一开始就出错。 我的直觉告诉我，最好的解决方案有 50% 的机会不涉及一个一个地导航这些节点！

Answer 1

据我所知，你只想改变路径

这是一个不错的教程： SVG Essentials/Animating and Scripting SVG

SVG 路径的 W3C 规范： w3.org/TR/SVG/paths

W3C 动画规范： w3.org/TR/SVG/animate

这是一个例子： carto.net/svg/samples/path_morphing

Answer 2

不得不提的是，2015 年为我们带来了几个非常不错的 svg morph 库：

• https://alexk111.github.io/SVG-Morpheus/
• http://greensock.com/morphSVG （可能是最好的，但你必须购买他们的许可证）
• https://github.com/gorangajic/react-svg-morph （用于反应）

Answer 3

事实上，正如达尔文所提到的，有很多库允许 svg 变形。

我发现的一些附加功能是：snap.svg、KUTE.js、GSAP。 Svg.js 有一个用于 svg morph 的插件，我认为 Velocity.js 还不支持这个。

Answer 4

释义：

目前，您必须在两个路径元素中使用相同数量的顶点，并且它们必须具有相同的类型并且在另一个路径描述中以相同的顺序出现。 您还应该将两个多边形定向在同一方向上（左右和左右会产生不需要的结果）。

因此，您可以这样做（请参阅下面的链接以获取示例），但您需要对其进行规划，以便使用相同的曲线类型、点等以完全相同的方式创建形状 A 的路径和形状 B 的路径。

这是我制作的一个示例：动画 svg 路径
我将右侧的路径设置为图像的蒙版； 它也有动画效果。

1. 我在 Illustrator 中创建了一个形状
2. 我复制了那个形状。
3. 我将副本修改为新形状，注意不要添加顶点或从贝塞尔曲线更改为线性曲线类型等
4. 仅供参考以确认点数，您可以选择路径，然后转到路径>简化，它将显示该路径上的当前点...
5. 我保存该 svg 文件，然后将这些路径复制/粘贴到另一个带有动画信息的 svg 中。
6. 注意：路径位于 svg 文件中的一个元素中，该元素对应于它在 illustrator 中所在的图层名称。 如果您在 illustrator 中将两个形状保留在不同的图层上并清楚地命名它们，这将有助于保持您的 svg 文件井井有条。
7. 注意#2：如果您创建的形状非常简单，即只有直线，则它可能会被保存为 _polygon 而不是我个人认为难以制作动画的 _path，因此我建议至少添加一个贝塞尔曲线手柄单个点（和第二个形状中相同的对应点）。

Answer 5

如果您可以将变形定义为更改列表而不是第二个 SVG，则可以使用 d3 http://d3js.org/框架

它的学习曲线有点陡峭，但它给了你很大的力量。 如果你想要更简单的东西，我建议 Raphael http://raphaeljs.com/ - 功能相似，但更容易开始。

Answer 6

查看一个纯 SVG 选项（即没有 Javascript）并建立在以前的答案的基础上，这是一个可能减少其他人的麻烦的工作示例。

<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>