Svg动态电力开关演示

最新推荐文章于 2024-05-14 10:42:26 发布

wangwstk

最新推荐文章于 2024-05-14 10:42:26 发布

阅读量954

点赞数 3

分类专栏： svg 文章标签： javascript

本文链接：https://blog.csdn.net/wangwstk/article/details/134033821

版权

本文通过SVG绘制电力线路图，包含两个开关和一个带有颜色渐变的电阻，并使用JavaScript实现开关的动态开合效果。提供了详细的SVG源码和最终的动态效果展示，附带Demo源码下载。

摘要由CSDN通过智能技术生成

1.线路图

先用svg绘制线路图，在该线路中添加2个开关和1个电阻，电阻添加颜色渐变效果，开关和电阻上方显示文字编号，最右侧添加1个箭头。
SVG线路图源码

<defs>
				 <g id="lineG1" transform="translate(30,70)rotate(-90)">
					  <line id="line1" fill="none" stroke="#00FF00" stroke-width="3" x1="10" y1="30" x2="10" y2="40"/>
					  <line id="lineA" fill="none" display="none" stroke="#00FF00" stroke-width="3" x1="10" y1="40" x2="10" y2="70"/>
					  <line id="line2" fill="none" stroke="#00FF00" stroke-width="3" x1="10" y1="40" x2="35" y2="60"/>
					  <line id="lineB" fill="none" stroke="#00FF00" stroke-width="3" x1="10" y1="70" x2="10" y2="80"/>
					  <circle cx="10" cy="40" r="4" stroke="#00FF00"  stroke-width="2" fill="#000000"/>
					  <circle cx="10" cy="70" r="4" stroke="#00FF00"  stroke-width="2" fill="#000000"/>
				 </g>
				 <g id