这不最近我司的设计师又给笔者整活了，在数据大屏页面的中间位置，做了一个效果图，不过需要做一个箭头沿着路径实现拐弯的动画效果；这可咋整呢，本文就结合CSS3的特性和svg，看一下实现的思路。

anime.js 实战使用 anime.js 轻松实现 SVG 路径 (path) 曲线动画

anime.js 实战：SVG clip-path 动画简明教程

最近的学习中，对于svg实现的文字霓虹灯动画感到很是有趣，而且实现起来也相对着来说比较容易，效果也不错，比如下图。 需要实现以上的效果，我们需要着重了解两个svg的属性stroke-dasharray与stroke-dashoffset。 官方解释为It's a list of…

可缩放矢量图形基于XML标记语言，用于描述二维的矢量图形。 作为一个基于文本的开放网络标准，SVG 够优雅而简洁地渲染不同大小的图形。

可以使用path和animateMotion构建有趣的SVG动画，path定义运动轨迹，animateMotion制定动画，二者结合，有趣多多

一张图结缘于SVG，从此对SVG的线条动画情有独钟。一文带你秒懂SVG，从此你也可以成为别人眼中的SVG大神。