如何使用JavaScript触发SVG动画？（不使用jQuery）

嘿，我找到了一个实用的SVG线条路径动画示例，已经验证可以直接运行，下面是完整的实现代码和核心原理说明：

核心CSS样式（控制动画逻辑） #

svg { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  left: 0; 
  top: 0; 
  display: block; 
  background: transparent; 
}
.path { 
  stroke: black; 
  stroke-dasharray: 290; /* 数值等于目标路径的总长度，让线条变成可偏移的"隐藏段" */
  stroke-dashoffset: 130; /* 初始偏移位置，决定动画从哪里开始 */
  animation: dash 6s 0s forwards infinite; /* 动画时长6秒，无延迟，结束后保持最终状态，循环播放 */
  stroke-width: 2px; 
  stroke-linecap: round; /* 让线条端点更圆润 */
  stroke-linejoin: round; /* 线条转角处也用圆角过渡 */
}
@keyframes dash { 
  from { stroke-dashoffset: 290; } /* 起始状态：偏移量等于路径长度，线条完全隐藏 */
  to { stroke-dashoffset: 0; } /* 结束状态：偏移量归0，线条完全显示 */
}

SVG载体（自定义路径内容） #

你可以替换viewbox参数和内部的path元素，来实现不同形状的线条动画：

<svg viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 示例是一个矩形路径，你可以换成自己需要的路径，记得同步修改stroke-dasharray的数值为新路径的总长度 -->
  <path class="path" d="M5,5 L5,95 L20,95 L20,5 Z" fill="none"/>
</svg>

关键要点说明 #

• stroke-dasharray：这是实现线条动画的核心，当它的值等于路径总长度时，整个路径会被处理成一段“隐藏的虚线”，为后续的偏移动画提供基础。
• stroke-dashoffset：通过动画改变这个属性的值，就能让线条逐步“显现”出来，模拟手绘的效果。
• 动画参数调整：如果不需要循环播放，去掉infinite即可；如果想让线条反向消失，可以把@keyframes里的from和to值互换。

内容的提问来源于stack exchange，提问作者Alan Alvarez