如何修改CSS中SVG路径动画的起始点与绘制方向？

动画方向和预期相反，本质是两个认知误区：

1. SVG路径的描边方向完全由<path>标签d属性的坐标书写顺序决定。你当前代码里路径以M 100 100（最左侧圆形位置）为起点，后续贝塞尔曲线命令一路向右绘制到最右侧圆形，所有描边动画默认沿这个书写顺序推进，加animation-direction: reverse只是反转动画播放时序，没有改变路径本身的方向逻辑，很容易出现时序错乱。
2. 你尝试的width: 0技巧仅适用于HTML块级元素，SVG路径不支持通过width属性控制绘制起点，写在CSS里不会产生任何效果。

二选一即可实现「从最右侧圆形开始绘制，最终延伸到最左侧圆形」的效果：

方案1：反转路径方向（最稳定，推荐） #

直接修改路径d属性的书写顺序，把原终点作为新起点，反向描述路径即可，不需要调整动画逻辑。如果不想手动计算反向贝塞尔曲线坐标，可以用Figma、在线SVG编辑器的「反转路径方向」功能一键生成，手动修改后的路径代码如下：

<path d="M 1200 500 q -100 150 -250 100 q -150 -50 -300 100 q -100 150 -250 100 q -150 -50 -300 100" stroke="blue" stroke-width="5" fill="none" />

替换原path标签后，去掉动画属性里的reverse关键字，原动画正向播放就会符合预期。

方案2：不修改路径，调整描边偏移逻辑 #

如果不想改动路径坐标，可以直接调整stroke-dashoffset的动画规则，利用偏移量反向推进描边：

1. 删除.forward-line动画配置里的reverse关键字
2. 修改dash关键帧的起止值：

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 300;
  }
}

你当前写的超长串stroke-dasharray属于硬编码凑数值，维护性很差，做路径描边动画可以用更通用的写法：

1. 给path标签加pathLength="1"属性，强制把路径计算长度固定为1，不需要手动测量路径实际长度
2. 把stroke-dasharray设为1，代表实色段、间隙长度都等于路径总长度
3. 只需要控制stroke-dashoffset在0~1之间变化即可控制绘制进度，代码简洁且适配任意长度的路径。
   优化后的核心代码示例：

.forward-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<path pathLength="1" d="M 1200 500 q -100 150 -250 100 q -150 -50 -300 100 q -100 150 -250 100 q -150 -50 -300 100" stroke="blue" stroke-width="5" fill="none" />

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