svg动画线条

最新推荐文章于 2025-10-22 22:36:24 发布

原创最新推荐文章于 2025-10-22 22:36:24 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #css3 #javascript

css 同时被 2 个专栏收录

4 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了如何使用SVG和JavaScript创建动态的虚线线条动画，通过关键帧动画和stroke-dashoffset属性调整线条的虚线效果，配合定时器实现流畅的线条流动。

直线线条动画

svg #path {
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;
}
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

虚线线条动画

curPath.setAttribute('stroke', '#379FFE')
curPath.setAttribute('stroke-width', '3')
curPath.setAttribute('fill', 'none')
// 虚线长度空白长度
curPath.setAttribute('stroke-dasharray', '6 4')
let num = 0
timer = setInterval(function () {
	num++
	// 正负可以控制线条流动方向
    curPath.setAttribute('stroke-dashoffset', -num)
}, 100)