上一篇文讲过了如何使用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标签的位置就可以做到顺序执行了。
调整顺序播放
最终效果
