snap.svg, jquery.svg 沿路径留下轨迹的箭头动画（有圆角）答案

【问题标题】：snap.svg, jquery.svg arrow animation along a path leaving a trail (has rounded corners)snap.svg, jquery.svg 沿路径留下轨迹的箭头动画（有圆角）
【发布时间】：2014-06-09 10:56:51
【问题描述】：

我在 snap.svg 和 jquery.svg 之间花费了很多时间，试图弄清楚如何为以下内容设置动画：

一个箭头，但在它后面留下了尾迹
箭头有 90 度弯曲，但在曲线上

所以我得到了路径动画，到目前为止，它是一个圆圈和一个弯曲的线。但是移动并留下轨迹的箭头证明是有问题的（尾巴比箭头细）。可以说，jQuery SVG 允许我不清除画布，因此我可以创建轨迹，但它是 Snap.animate，我已经制定出用于沿路径制作动画。

所以问题已经解决了。

第一季度。哪个最好用？ snap.svg 或 jquery.svg

第二季度。任何关于如何实现我的动画的想法都将不胜感激。

谢谢

达西

【问题讨论】：

你不能说哪个最好用。我个人会将您在 jsfiddle 上的代码与您目前所拥有的代码一起发布。如果您需要对旧版浏览器的支持，您可能希望远离 Snap（但可以查看 Raphael）。

标签： javascript jquery animation svg snap.svg

【解决方案1】：

对我来说，解决方案是：

snap.svg

我检查了许多路径动画等解决方案，但发现：

用于线条显示的路径的虚线动画
沿箭头路径的动画

从 SVG 文件中获取路径数据并将它们放入 javascript 中的变量使事情变得更容易，因为动画在加载的 svg 上不起作用，我确信有一个简单的修复/解决方案，但 js var 数据有效。所以我就去了。

【讨论】：