使用 SVG 制作环形进度条，主要使用的是 SVG 本身的 stroke-dasharray 和 stroke-dashoffset。

对于svg，可能一些刚接触前端的同学比较的陌生。你可以先去MDN上看一下基本的介绍。本篇内容最重要的一个知识点就是stroke-dasharray和stroke-offset的组合使用。 这个难度不是很大，本质上就是一个小圆弧在圆环上旋转。 接下来重点来了，我们需要通过tran…

使用 SVG 在网页中实现一个签名效果。

使用 GreenSock 来制作有趣的 SVG 动画

SVG动画本质上是动图，我们并不能把它当做实现真正动画的工具，它比gif动图的优势在于小的体量，可交互，可矢量放大，方便修改色值，但它的劣势也很明显，渲染需要耗内存（所以能用基本的移动旋转等等实现就不要用路径变形），而且移动端应用需要第三方框架，即使web应用还要考虑到浏览器的…

如今 SVG 已经在前端各个领域都有所作为，无论是项目里的应用还是 demo 都所处可见，这里我就用一个实例的写法带新同学轻松的打开 SVG 动画的大门。