Question

我做了一些搜索，但我必须承认，我有0次SVG经验，我见过一堆现代图书馆，比如Raphael，PaperJS，KineticJS，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 您可以visualize here，只需粘贴区域中的代码即可。

我没有代码可以显示，我不想错误开始。我的直觉告诉我，有50％的可能性，最佳解决方案不会涉及逐个导航这些节点！

Answer 1

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

这是一个很好的教程：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 2

不得不提到2015年给我们带来了几个非常好的svg变形库：

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

Answer 3

复述：

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

所以你可以这样做（参见下面的链接获得一个例子），但你需要计划出来，这样你就可以用相同的曲线类型，点等创建形状A的路径和形状B的路径。 / p>
以下是我做的一个例子：animated svg path
我把右边的路径设置为图像的掩码;它也是动画。

我在插画家中创建了一个形状

我复制了那个形状。

我将副本修改为新形状，小心不要添加顶点或从bezier更改为线性曲线类型等

fyi确认点数您可以选择路径，然后转到路径＆gt;简化，它会显示该路径上的当前点...

我保存了svg文件，然后使用动画信息将这些路径复制/粘贴到另一个svg中。

注意：路径放置在svg文件的元素中，该元素对应于插图中的图层名称。如果你将这两个形状保留在插图画家的不同图层上并清楚地命名它将有助于保持你的svg文件有条理。

注意＃2：如果您创建形状并且它非常简单，即只有直线，它可能会保存为_polygon而不是_path，我个人发现很难设置动画，所以我建议在至少一个点上添加一个贝塞尔手柄（以及第二个形状中相同的对应点）。

Answer 4

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

我发现的一些额外内容是：snap.svg，KUTE.js，GSAP。 Svg.js有一个svg变形插件，我不相信velocity.js支持这个。

Answer 5

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

它有一个陡峭的学习曲线，但它给你很多力量。如果你想要更轻松的东西，我建议拉斐尔http://raphaeljs.com/ - 功能类似，但它更容易启动。

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

5 个答案: