16

我做了一些搜索，但我不得不承认，我对 SVG 的经验为零，我看过一堆现代库，例如 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% 的机会不涉及到导航这些节点然后逐个区分！

4

5 回答 5

6

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

于 2015-12-30T09:46:51.003 回答
5

据我所知，您只想变形路径

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

于 2013-02-14T08:11:56.313 回答
3

确实，正如达尔文所提到的，有相当多的库允许 svg 变形。

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

于 2016-04-23T15:04:23.003 回答
2

释义：

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

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

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

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

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

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

于 2013-02-14T08:38:57.080 回答