web组态学习——SVG虚线的动态效果

最新推荐文章于 2024-07-08 23:12:45 发布

yb305小白

最新推荐文章于 2024-07-08 23:12:45 发布

阅读量2.2k

点赞数

分类专栏： web组态文章标签： svg 虚线 stroke 虚线流动效果

本文链接：https://blog.csdn.net/yb305/article/details/108885542

版权

web组态专栏收录该内容

3 篇文章 7 订阅

订阅专栏

1.利用svg的stroke-dasharray来创建虚线

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>
 
</body>
</html>

2.效果

3.让虚线移动，实现流动效果，css代码

<style>
		.water {
			stroke-dasharray: 1000;
			stroke-dashoffset: 1000;
			animation: run 10s linear infinite;
		}

	    @keyframes run {
			from {
				stroke-dasharray: 10, 5;
			}
			to {
				stroke-dasharray: 20, 5;;
			}
		}
</style>

4.流动效果图