一根飞线的故事-SVG篇

作者|数澜UED团队

缺少飞线效果的地图，就如同一位发际线后移的中年人般显得单调乏味。 —— By 胖子

每逢春运与双十一期间，统计图表因加入了飞线动画而更加引人注目。本文将为大家详细介绍如何通过恰当的方式制作出一条美观的飞线效果。

SVG

本文主要讲解如何利用SVG实现飞线效果的绘制，因此功能强大的SVG技术必然能够满足我们对飞线效果的各种实现需求。接下来，我将为大家介绍完成这一效果所需掌握的一些基础知识点。

Path元素

path元素
作为SVG中基础图形元素中最具有表现力的一种，它不仅能够生成各类基本图形，还能够构建更为复杂的图形结构。在本次应用中，我们仅需借助该元素来描绘一条曲线。

首先，我们需要先构建出这条曲(tou)线(fa)。

目前，这根头发已经在屏幕上完成放置。如果对path元素的曲线进行无限放大，可以发现其实际上是由大量坐