上一篇文讲过了如何使用Adobe IIIustrator来生成前端html使用的svg标签文件。

但是如果配合animejs使用来做动画，有些不尽人意，直接上案例来说明遇到的情况。

首先拿到了一个UI提供的ai文件，无脑的导出一下子。

配上animejs标签之后，发现里面还有除了path标签之外的polygon标签。

这就导致了，在动画描线的过程中，只会描path的线，不会描polygon。（使用css不会出现这种问题的）

所以我大胆尝试了以下的写法。干脆动画都不动了。

错误写法

以上的例子，可能不太贴切，也有别的解决方案，总之想表达的意思就是，想要导出只有path标签的svg文件。

我们在AI源文件中发现，之所以会有polygon标签，是因为有一些复杂图形可以由简单图形拼接而成。所以才没有生成路径。

解决方案：

按住shift手动把复杂图形的每一小块选中。右击，建立复合路径，这样这几块导出svg的时候就是一个path标签了，这样做的好处还可以大大的减少代码量。

至于单个的图形，如果没有生成path标签，也可以右击—>建立复合路径  来将它“路径化”

方法

复合路径之前

复合路径之后

一个“复合路径”操作再导出svg，代码直接少了20行。

来看看最终的path路径描线效果吧。至于使用animejs，偏旁部首的笔画动画顺序，完全取决于标签的先后顺序。调整path标签的位置就可以做到顺序执行了。

调整顺序播放

最终效果