svg线路图-线路动态流动效果

xcLeigh

已于 2022-08-19 23:10:54 修改

阅读量5.4k

点赞数 8

分类专栏： svg 文章标签：动画前端 javascript

于 2022-08-11 17:10:31 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/126288799

版权

svg 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

文章目录

1.线路图
2.html线路流动效果
3.动态效果
4.svg相关资源
优质资源分享

1.线路图

先用svg绘制，线路图，画出几条线路，然后根据线路的起始坐标，添加动态效果，出现电流流动效果。

线路图源码

<svg id="svg" width="calc(100% - 4px)" height="calc(100% - 4px)" version="1.1"
xmlns="http://www.w3.org/2000/svg" style="border:2px solid #ccc;">
	<g id="global_box" transform="translate(0,0)">
		<line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"
		transform="matrix(1,0,0,1,47.99999894389384,7.999999816329364)">
		</line>
		<circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"
		transform="matrix(1,0,0,1,222.99999488018102,7.99999933949222)" id="t2">
		</circle>
		<line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"
		transform="matrix(6.123233601181349e-17,1,-1,6.123233601181349e-17,286.99999341081593,5.999999362451035)">
		</line>
		<circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"
		transform="matrix(1,0,0,1,86.99999800258183,8.00000126979964)" id="t1">
		</circle>
		<circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"
		transform="matrix(1,0,0,1,86.99999035022864,114.9999973597346)" id="t3">
		</circle>
	</g>
</svg>

线路图效果
在这里插入图片描述

2.html线路流动效果

利用svg线路图线路的stroke-dasharray和css的动画效果animation的结合，实现线路流动效果。

html源码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>svg线路动态效果</title>
    <style style="text/css">
		 .svgLineDL{
		  stroke-dasharray:0% 100% ;
		  stroke:#FCFCEC;
		  animation:move2 1s infinite;
		}
		 @keyframes move2{
		   0%{
			stroke-dasharray:0,100%;
		  }
		  100%{
			stroke-dasharray:100%,0;
			stroke:#C30000;
		  }
		} 
	</style>
</head>
<body>
    <svg id="svg" width="calc(100% - 4px)" height="calc(100% - 4px)" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:2px solid #ccc;">
	<g id="global_box" transform="translate(0,0)">
		<line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"
		transform="matrix(1,0,0,1,47.99999894389384,7.999999816329364)">
		</line>
		<circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"
		transform="matrix(1,0,0,1,222.99999488018102,7.99999933949222)" id="t2">
		</circle>
		<line x1="100" y1="100" x2="300" y2="100" stroke="black" stroke-width="1"
		transform="matrix(6.123233601181349e-17,1,-1,6.123233601181349e-17,286.99999341081593,5.999999362451035)">
		</line>
		<circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"
		transform="matrix(1,0,0,1,86.99999800258183,8.00000126979964)" id="t1">
		</circle>
		<circle cx="100" cy="100" r="10" stroke="#1F96DC" stroke-width="1" fill="#031546"
		transform="matrix(1,0,0,1,86.99999035022864,114.9999973597346)" id="t3">
		</circle>
		<line x1="187" y1="108" x2="323" y2="108" stroke="#C30000" stroke-width="2">
		</line>
		<line x1="187" y1="108" x2="323" y2="108" stroke="#C30000" class="svgLineDL"
		stroke-width="2">
		</line>
		<line x1="187" y1="215" x2="187" y2="108" class="svgLineDL" stroke="#C30000"
		stroke-width="2">
		</line>
	</g>
</svg>
</svg>
</body>
 
</html>