问题标签 [svg-morphing]

我做了一些搜索，但我不得不承认，我对 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：

SVG2：

ps你可以在这里可视化，只需在该区域粘贴代码即可。

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

我编写了一个使用路径变形创建动画 svg 的工具。目前，我的工具仅依赖于从字符串构建代码，但我有兴趣过渡到 svg.js 库。不过，我遇到了路径变形部分的障碍，即创建这样的东西

http://letmespellitoutforyou.com/samples/svg/anim_morph.svg

我在 svg.js 文档中没有看到任何关于动画的内容

http://documentup.com/wout/svg.js#animating-elements

谈论动画 'd' 属性并为其提供 to= 和 from= 参数。有人可以告诉我这是否受支持，我该怎么做，如果不支持，是否可以自己组合元素并将其添加到 svg.js 对象？

我一直在寻找一个关于如何为 svg 路径变形设置动画的好例子。我知道如何使用 SMIL 完成相当复杂的操作，但是 snap.svg 是新的和闪亮的，而且似乎每个人都喜欢它，所以我想看看。我在任何地方都找不到关于如何在任何地方进行动画路径变形的好例子。希望 snap.svg 大师可以为我指明正确的方向？

这是 svg 图像的链接及其代码：

图片链接

我最近一直在涉足 SVG，我目前正试图在用户将鼠标悬停在钻石上时将其变形为圆形。

我在CSS Tricks上找到了本教程

我注意到他们使用点来制作动画，但是我的 SVG 形状是：

和

有没有办法做到这一点？我如何获得这些形状的要点，以便我可以按照 CSS 技巧教程进行操作？

我目前正在寻找一种解决方案，将两条或多条路径相互变形，以创建平滑的 pinch2Zoom 动画。目前，我正在使用 opacity 将两条路径相互融合：

但这只是一种解决方法，我在互联网上并没有真正找到很多关于“真实”svg 动画的信息，这些动画将路径转换为其他路径......所以也许你们中的一个人有一个好主意:) - thx in进步

我有一点理论问题。假设我在 svg 中有 2 条路径。每个都有不同的点数。一条有 4 条贝塞尔曲线，另一条有 3 条。

我想做的是将一个变成另一个。现在，我知道它们必须具有相同的确切结构和相同数量的点才能这样做。

所以，问题是，我可以在它们的路径中添加“虚拟点”以获得相同的结构和点数，而不改变对象的形状吗？

例如，在其中一条路径中取一个点，然后在其后添加相同的点以增加点数。或者在两条路径中创建一条贝塞尔曲线，实际上会伪装成一条线而不是一条曲线。那会改变对象吗？如果我在 x=1 y=1 和 x=4 y=4 上有点，使用这种形式会使贝塞尔曲线成为一条线吗？(M1 1C1 1 4 4 4 4)

我想在没有 SMIL 或库（jquery、Snap.svg、Velocity.js 等）的情况下对 svg 路径数据进行变形/动画处理，只需纯 javascript（如果可能，还可以使用 css）。我想这样做是因为 Chrome 已弃用 SMIL，他们建议使用 css 或“Web 动画”进行动画处理——它们对 Web 动画意味着什么？？-。例如，我想在下面的代码中将 id 为“rect1”的路径变形为 id 为“rect2”的路径：

I am using a couple of functions from Snap.SVG, mainly path2curve and the functions around it to build a SVG morph plugin.

I've setup a demo here on Codepen to better illustrate the issue. Basically morphing shapes simple to complex and the other way around is working properly as of Javascript functionality, however, the visual isn't very pleasing.

The first shape morph looks awful, the second looks a little better because I changed/rotated it's points a bit, but the last example is perfect.

So I need either a better path2curve or a function to prepare the path string before the other function builds the curves array. Snap.SVG has a function called getClosest that I think may be useful but it's not documented.

There isn't any documentation available on this topic so I would appreciate any suggestion/input from RaphaelJS / SnapSVG / d3.js / three/js developers.

• I want a smooth transition between the shapes (the example below shows a sudden transition just so you get an idea where I need a smooth transition).
• The order of the shapes is determined by Javascript (for the example I fixed an arbitrary sequence, but in the actual problem user input determines which shape is choosen, so it isn't known beforehand).

example.svg:

Supposedly it's somehow doable with <animate>, but I can't get it to work.

animate.svg:

我使用了 [ skylake ] 库 == svg 变形动画菜单，并想做类似的菜单动画（svg 变形动画）：http: //jemimahbarnett.com。当您的鼠标进入时，svg 菜单打开 && 鼠标离开时关闭。我做到了，但在我的 chrome 控制台中，我得到了： Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

如何正确解决？那里是morph.js带有 svg 路径的动画菜单的指令文件：

https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js

这是我在项目中使用它的方式：