SVG虚线箭头动画完成后持续循环动效实现求助

你的问题出在重复执行路径绘制动画上——给d属性加repeatCount="indefinite"会让路径每次都回到初始的空状态，自然无法保持绘制完成后的虚线循环效果。

要实现「先绘制完整箭头，再让虚线持续流动」的效果，需要拆分动画逻辑：

1. 先执行一次路径绘制动画，让箭头固定在最终形态
2. 绘制完成后，启动stroke-dashoffset的循环动画，让虚线沿着路径移动

修改后的完整SVG代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 347.09505655750377 140.4105292643194"
 width="694.1901131150075" height="280.8210585286388">

 <rect x="0" y="0" width="347.09505655750377" height="140.4105292643194" fill="#ffffff" />
 <g stroke-linecap="round">
   <!-- 主虚线路径：先绘制，再循环流动 -->
   <g transform="translate(30 110.4105292643194) rotate(0 143.54752827875188 -40.2052646321597)">
     <path d="M0 0 C0 0, 0 0, 0 0" stroke="#495057" stroke-width="4.5" fill="none" stroke-dasharray="8 12" opacity="0">
       <!-- 初始绘制动画：从空路径到完整路径，只执行一次 -->
       <animate attributeName="d" 
                from="M0 0 C0 0, 0 0, 0 0" 
                to="M0 0 C47.85 -13.4, 239.25 -67.01, 287.1 -80.41"
                begin="1000ms" 
                dur="900ms" 
                fill="freeze" />
       <!-- 显示路径：绘制开始时显示，保持可见 -->
       <animate attributeName="opacity" 
                from="1" 
                to="1" 
                begin="1000ms" 
                dur="900ms" 
                fill="freeze" />
       <!-- 虚线流动动画：绘制完成后启动，循环执行 -->
       <animate attributeName="stroke-dashoffset"
                from="0"
                to="-20" <!-- dasharray总和：8+12=20 -->
                begin="1900ms" <!-- 1000+900，绘制完成后启动 -->
                dur="1s"
                repeatCount="indefinite" />
     </path>
   </g>
   <!-- 箭头第一部分：仅绘制动画 -->
   <g transform="translate(30 110.4105292643194) rotate(0 143.54752827875188 -40.2052646321597)">
     <path d="M262.72 -62.93 C262.72 -62.93, 262.72 -62.93, 262.72 -62.93" stroke="#495057" stroke-width="4.5"
       fill="none" opacity="0">
       <animate attributeName="d" 
                from="M262.72 -62.93 C262.72 -62.93, 262.72 -62.93, 262.72 -62.93"
                to="M262.72 -62.93 C268.12 -66.8, 273.53 -70.68, 287.1 -80.41" 
                begin="1900ms" 
                dur="300ms" 
                fill="freeze" />
       <animate attributeName="opacity" 
                from="1" 
                to="1" 
                begin="1900ms" 
                dur="300ms" 
                fill="freeze" />
     </path>
   </g>
   <!-- 箭头第二部分：仅绘制动画 -->
   <g transform="translate(30 110.4105292643194) rotate(0 143.54752827875188 -40.2052646321597)">
     <path d="M257.18 -82.69 C257.18 -82.69, 257.18 -82.69, 257.18 -82.69" stroke="#495057" stroke-width="4.5"
       fill="none" opacity="0">
       <animate attributeName="d" 
                from="M257.18 -82.69 C257.18 -82.69, 257.18 -82.69, 257.18 -82.69"
                to="M257.18 -82.69 C263.82 -82.18, 270.45 -81.68, 287.1 -80.41" 
                begin="2200ms" 
                dur="300ms" 
                fill="freeze" />
       <animate attributeName="opacity" 
                from="1" 
                to="1" 
                begin="2200ms" 
                dur="300ms" 
                fill="freeze" />
     </path>
   </g>
 </g>
</svg>

关键修改说明 #

1. 拆分动画阶段：

   • 初始绘制动画：保持fill="freeze"，让路径停留在最终形态，不再重复执行
   • 流动动画：新增stroke-dashoffset动画，从0到-20（对应stroke-dasharray="8 12"的总和），循环执行时会让虚线沿着路径持续移动

2. 时间同步：

   • 流动动画的begin设为绘制动画的结束时间（1000ms+900ms=1900ms），确保绘制完成后才开始流动

3. 箭头部分：

   • 箭头的两段路径不需要流动效果，保持原有绘制逻辑即可

你可以根据需求调整stroke-dashoffset动画的dur值，改变虚线流动的速度。

内容的提问来源于stack exchange，提问作者Mawnir fas