共计 3741 个字符，预计需要花费 10 分钟才能阅读完成。
在工作日常中难免会遇到一些大屏我的项目，对于中台类型产品，少不了数据流通显示环节。
明天就给大家解说一种实现数据流通图的写法。
等不及的小伙伴间接翻到最底部，把 html 代码拷贝进去，粘贴到你的 html 内就能看到成果。
需要：
实现下图所示:
剖析：
拿到设计稿后咱们首先要做的是剖析此图该用哪种技术实现？
第一步：应该应用定位实现图中的文本和动态元素
第二步：难点剖析；须要动静展示数据流。这里因为动画很简略，所以抉择 svg 实现。
第三步：布局，以及排版；把设计稿先固定宽高，当前通过缩放实现适配。
先实现这样的布局。实现布局时候，将整体设计稿定当作背景。
能够先把大体布局写好。也能够先实现动图。这里咱们抉择实现大体布局。再把设计稿背景去掉。
接着制作 svg 门路
调整门路款式
导出 svg
在 VScode 关上刚刚贮存的 svg，复制刚刚 svg 中的多边形或者门路，并粘贴到空 svg 内
<!-- 这里的 980 和 526 就是设计稿宽高 -->
<!-- 给 polyline 设置 style，和设计稿对齐。-->
<svg xmlns="http://www.w3.org/2000/svg" width="980" height="526">
<polyline style="fill:none;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10; stroke:rgb(58 171 255 / 20%); transform: translate(83px, -31px);" points="78.521,237.425 -31.068,279.891 205.333,397.667 454.333,304 400,275.667 576,215 826.465,320.023 634,409.343"
/>
</svg>再就是一步一步调整；增加渐变色，增加动画属性等等。就实现了。上面是整体代码：复制粘贴到你的 html 内就能看到成果辣！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:980px;height: 526px; background-image: url(./gbs.png); position: relative;">
<div style="position: absolute;width: 100%;height: 100%;">
<svg xmlns="http://www.w3.org/2000/svg" width="980" height="526">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #0285FF;" />
<stop offset="5%" style="stop-color: #00FCFF;" />
<stop offset="10%" style="stop-color: #0285FF;" />
<stop offset="15%" style="stop-color: #00FCFF;" />
<stop offset="20%" style="stop-color: #0285FF;" />
<stop offset="25%" style="stop-color: #00FCFF;" />
<stop offset="30%" style="stop-color: #0285FF;" />
<stop offset="35%" style="stop-color: #00FCFF;" />
<stop offset="40%" style="stop-color: #0285FF;" />
<stop offset="45%" style="stop-color: #00FCFF;" />
<stop offset="50%" style="stop-color: #0285FF;" />
<stop offset="55%" style="stop-color: #00FCFF;" />
<stop offset="60%" style="stop-color: #0285FF;" />
<stop offset="65%" style="stop-color: #00FCFF;" />
<stop offset="70%" style="stop-color: #0285FF;" />
<stop offset="75%" style="stop-color: #00FCFF;" />
<stop offset="80%" style="stop-color: #0285FF;" />
<stop offset="85%" style="stop-color: #00FCFF;" />
<stop offset="90%" style="stop-color: #0285FF;" />
<stop offset="95%" style="stop-color: #00FCFF;" />
<stop offset="100%" style="stop-color: #0285FF;" />
</linearGradient>
</defs>
<polyline style="fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;transform: translate(83px, -31px);" points="78.521,237.425 -31.068,279.891 205.333,397.667 454.333,304 400,275.667 576,215 826.465,320.023 634,409.343"
stroke-dasharray="70" stroke-dashoffset="0" stroke="url(#gradient)"
>
<animate
attributeName="stroke-dashoffset"
attributeType="XML"
values="980;0;"
dur="5s"
repeatCount="indefinite"
></animate>
</polyline>
<polyline style="fill:none;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10; stroke:rgb(58 171 255 / 20%); transform: translate(83px, -31px);" points="78.521,237.425 -31.068,279.891 205.333,397.667 454.333,304 400,275.667 576,215 826.465,320.023 634,409.343"
/>
</svg>
</div>
<!-- 这里你们没有背景图片。能够本人设置成一个纯色背景，就能够看到是笼罩在动图下面的 -->
<div style="width:160px;height: 120px;background-image: url(./CnRxMh.png); position: absolute;left: 106px;top:132px;border:1px solid white;"> 元素 1 </div>
<div style="width:160px;height: 120px;background-image: url(./K1R8bm.png); position: absolute;left: 205px;top:285px;border:1px solid white;"> 元素 2 </div>
<div style="width:160px;height: 120px;background-image: url(./Omc8gl.png); position: absolute;left: 572px;top:115px;border:1px solid white;"> 元素 3 </div>
<div style="width:160px;height: 120px;background-image: url(./fwilwN.png); position: absolute;left: 635px;top:296px;border:1px solid white;"> 元素 4 </div>
</div>
</body>
</html>效果图：
如果感觉有帮到你，请给个关注，点个赞吧!
留神：因为是应用定位实现，所以肯定要留神元素摆放的先后顺序。先绘制流动图，再绘制其余元素，这样就被盖在流动图下面。
正文完
