SVG 动画精髓

经常在Codepen上看到大侠们用SVG画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对SVG有足够透彻的了解，并且自己画出那些SVG图案，才有办法让他动起来。 既然自己画不出来，那我们就去找现成的库，svg库有很多，如Flaticon、iconfont、Ico…

早上无意间进入一个网站，看到他们的LOGO效果略屌，如图： 刚开始以为是gif动画之类的，审查元素发现居然是用SVG + CSS3动画实现的，顿时激起了我的(hao)欲(qi)望(xin)，决定要一探究竟，查看代码之后，发现原理居然是如此简单：多个SVG描边动画使用不同的ani…

前段时间研究 SVG 压缩优化，发现 SVG 预定义的 rect、circle、ellipse、line、polyline、polygon 六种基本形状可通过 path 路径转换实现，这样可以在一定程度上减少代码量。不仅如此，我们常用的 SVG Path 动画 (路径动画)，是以操作 path 中两个属性值 stroke-dasharray 和 stroke-dashoffset 来实现，基本形状转换为 path 路径，有利于实现路径动画。

分享一个引入 svg 图标文件的小技巧，希望能与大家共同进步。

Alloyteam 的这篇文章写得很好，思路清晰，实用性强，推荐一下~

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

使用 SVG 轻松打造具有科幻元素的用户界面

SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形，并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可…