SVG使用offset-path实现圆点沿路径移动时与描边路径无法对齐如何排查

开发者阿泽

2026-10-19

问题原因

核心错位来自SVG的全局变换没有同步作用到圆点的offset-path计算逻辑：你给svg元素设置了transform: scale(-1, -1) translateX(40px)，这个变换会让内部的路径渲染时整体翻转、平移，但offset-path读取的是路径d属性的原始坐标，不会继承父级SVG的变换规则，导致圆点移动的轨迹和实际渲染出来的线条轨迹完全不匹配。
其次你给circle元素设置了初始的cx、cy属性，offset-path的位移会和这个初始定位叠加，进一步放大了偏移量。

解决方案

你可以根据需求选择对应方案修改：

如果你不需要保留SVG的全局翻转变换，直接删除SVG的transform规则即可，同时调整圆点的定位属性保证中心贴合路径：

svg {
  @apply m-auto;
  transform-origin: center center;
  /* 删除原有transform规则 */
}
circle {
  offset-path: path('M9 315V207C9 179.386 31.3858 157 59 157H894.5C922.114 157 944.5 134.614 944.5 107V8');
  offset-distance: 0%;
  animation: ball 2s infinite;
  /* 新增以下规则，清除初始偏移、让圆点中心贴合路径 */
  cx: 0;
  cy: 0;
  offset-anchor: center;
}