如何让animCJK的SVG笔画顺序动画完成后间隔1秒完整循环重放

直接修改SVG内部代码即可实现需求，无需调整页面嵌入逻辑，改动分为两部分：

1. 替换SVG内部的样式代码 #

找到SVG中的<style>标签，替换为如下内容：

@keyframes zk {
  /* 初始状态到自身动画启动前，保持未绘制状态 */
  0%, var(--start) {
    stroke-dashoffset: 3339;
  }
  /* 单笔画绘制完成后到周期结束前，保持绘制完成状态 */
  calc(var(--start) + 13.79%), 99.99% {
    stroke-dashoffset: 0;
  }
  /* 周期结束瞬间所有笔画同步重置为初始状态 */
  100% {
    stroke-dashoffset: 3339;
  }
}
svg.acjk path[clip-path] {
  --t: 0.8s; /* 单笔画绘制时长，与原逻辑保持一致 */
  --cycle: 5.8s; /* 全局循环总周期：4笔画总耗时4.8s + 1s结束间隔 */
  /* 13.79%为单笔画绘制时长占总周期的比例：0.8 / 5.8 ≈ 0.1379 */
  animation: zk var(--cycle) linear infinite;
  stroke-dasharray: 3337;
  stroke-dashoffset: 3339;
  stroke-width: 128;
  stroke-linecap: round;
  fill: none;
  stroke: #000;
}
svg.acjk path[id] {fill:#ccc;}

2. 修改带绘制动画的path属性 #

找到SVG末尾4个带clip-path属性的path，将其style属性中的--d:Xs;替换为对应的--start值：

<!-- 第一个笔画，启动时间占比1/5.8≈17.24% -->
<path style="--start:17.24%;" pathLength="3333" clip-path="url(#z20013c1)" d="M190 298L232 337L295 584"/>
<!-- 第二个笔画，启动时间占比2/5.8≈34.48% -->
<path style="--start:34.48%;" pathLength="3333" clip-path="url(#z20013c2)" d="M262 311L738 260L784 305L716 468"/>
<!-- 第三个笔画，启动时间占比3/5.8≈51.72% -->
<path style="--start:51.72%;" pathLength="3333" clip-path="url(#z20013c3)" d="M314 526L699 491L773 502"/>
<!-- 第四个笔画，启动时间占比4/5.8≈68.97% -->
<path style="--start:68.97%;" pathLength="3333" clip-path="url(#z20013c4)" d="M445 72L515 120L497 914"/>

修改完成后原有的<img>嵌入方式无需调整，即可实现完整序列循环播放效果。 #

1. 统一全局动画周期：原逻辑下4个笔画全部绘制完成需要4.8s，加上1s间隔总周期设为5.8s，所有笔画的动画时长都使用该统一值，保证所有动作同步。
2. 规避延迟属性的缺陷：原生animation-delay仅在动画第一次迭代前生效，后续循环不会重复触发延迟，因此将笔画启动逻辑移入关键帧内部，通过自定义变量--start控制每个笔画的动画启动节点，每轮循环都会按设定的顺序执行。
3. 统一重置逻辑：关键帧100%位置统一设置为初始未绘制状态，保证整个序列播放完成后所有笔画同时重置为灰色，再进入下一轮循环。

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