在工作日常中难免会遇到一些大屏项目，对于中台类型产品，少不了数据流通显示环节。
今天就给大家讲解一种实现数据流通图的写法。
等不及的小伙伴直接翻到最底部，把html代码拷贝出来，粘贴到你的html内就能看到效果。
需求：
实现下图所示:
分析：
拿到设计稿后我们首先要做的是分析此图该用哪种技术实现？
第一步：应该使用定位实现图中的文本和静态元素
第二步：难点分析；需要动态展现数据流。这里因为动画很简单，所以选择svg实现。
第三步：布局，以及排版；把设计稿先固定宽高，以后通过缩放实现适配。
先实现这样的布局。实现布局时候，将整体设计稿定当作背景。
可以先把大体布局写好。也可以先实现动图。这里我们选择实现大体布局。再把设计稿背景去掉。
接着制作svg路径
调整路径样式
导出svg
在VScode打开刚刚储存的svg，复制刚刚svg中的多边形或者路径，并粘贴到空svg内
再就是一步一步调整；添加渐变色，添加动画属性等等。就完成了。下面是整体代码：复制粘贴到你的html内就能看到效果辣！
Document
元素1
元素2
元素3
元素4
效果图：
如果觉得有帮到你，请给个关注，点个赞吧!
注意：由于是使用定位实现，所以一定要注意元素摆放的先后顺序。先绘制流动图，再绘制其他元素，这样就被盖在流动图上面。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
