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

Question

我做了一些搜索,但我不得不承认,我对SVG有0次经验,我见过一堆现代图书馆,比如Raphael,PaperJS,KineticJS,EaselJS,但我不知道这里的目标是什么,也许甚至CSS关键帧都可以解决问题.

指出这个问题将不胜感激.

目标
在浏览器上,我想使用转换类型将svg1动画为svg2ease-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你可以通过简单地粘贴区域中的代码来实现这里的可视化.

我没有代码可以显示,我不想开始错.我的直觉告诉我,有50%的可能性,最佳解决方案不涉及逐个导航那些节点!

Answer 1

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

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

Answer 2

据我所见,你只想变形路径

这是一个很好的教程:http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG

SVG路径的W3C规范:http://www.w3.org/TR/SVG/paths.html

W3C动画规范:http://www.w3.org/TR/SVG/animate.html

这是一个例子:http://www.carto.net/svg/samples/path_morphing.shtml

Answer 3

释义：

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

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

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