本系列从 Web 前端实战的角度，给大家分享介绍如何从零打造一个自己专属的绘图工具，实现流程图、拓扑图、脑图等类 Visio 的绘图工具。

✨ 别只是懂Vue和React了，原生的东西也赶紧学起来吧。SVG在前端的地位越来越高，它能轻轻松松做出CSS难以做到的特效 ✨

效果如下 流程 线条是个svg， 我们通过svg内的path来实现小圆点的动画效果。 svg ui一般会提供。 注意点 vue内svg内不能写style, 参考-当template里的svg包含sty

为什么选择 GSAP？ 先来看一个 GSAP （GreenSock Animation Platform）介绍，以下动画使用 GSAP 编写： https://codepen.io/GreenSock

演示 查看在线版本 Polygon's PlayStation 4 Review vivus.js - svg animation 原理 要实现上面酷炫的描边动画，首先我们需要了解 SVG 中实现描边

我更喜欢把这种动画叫做路径跟随动画或者轨迹动画，正如你所看到的，一个元素（物体）沿着特定的路径（轨迹）进行运动。

平滑的变形动画真的算是 SVG 中的独门武器了。其原理很容易想到。就是不同形状之间能平滑转换，SVG 中的形状其实也是有不同坐标之间的线段绘制而成的。

人类的视觉比较容易被变化所吸引，尤其是颜色的变化。像上世纪 80 年代的霓虹灯广告牌，我很难不被它所吸引。

SVG 的应用十分广泛，得益于 SVG 强大的各种特性。 利用 URL.createObjectURL(svg) 取出 URL。 由于微信编辑器不允许嵌入 <style><script><a> 标签，利用SVG SMIL 可进行微信公众号极具创意的图文排版设计，包括动画与交互。…