html svg 线条动画,SVG 线条动画入门

原标题：SVG 线条动画入门

(点击上方公众号，可快速关注)

作者：伯乐在线专栏作者 - chokcoco

如需转载，发送「转载」二字查看说明

通常我们说的 Web 动画，包含了三大类。

CSS3 动画

java 动画(canvas)

html 动画(SVG)

个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

举个栗子

SVG 线条动画，在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面，看看最近项目里的一个小需求，一个这种形状的进度条：

把里面的进度条单独拿出来，也就是需要实现这样一个效果：

脑洞大开一下，使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的，就是很麻烦。但是如果采用 SVG 的话，迎刃而解。

See the Pen 不规则进度条 by Chokcoco (@C