使用offset-path时实际运动路径与绘制路径不符的问题

我搞不懂为什么红色线条的实际运动路径和绘制的圆形路径对不上——明明用的是完全一样的path值：圆形的d属性和线条的offset-path路径完全相同。

我哪里操作错了？是不是坐标系的问题？我想要的效果是红色线条贴合圆形，延长线能从圆心穿出来（抱歉我中文几何术语不太标准）。

背景：我正在学SVG元素定位和动画，发现offset-path在图形移动场景里很有用，想复用同一路径值给运动图形和参考路径，但就连最简单的直线path都没成功。

实验代码 #

CSS

body {
  justify-content: center
}

.track {
  stroke: #ccc
}

.marker {
  offset-path: path('M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

HTML

<svg viewbox="0,0 25,25" width="200px" height="200px">
      <!-- 运动参考路径 -->  
      <path 
           class="track"
           fill="none"
           stroke-width="0.25"
           d="M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"
      />
      <!-- 运动元素 -->
      <path d="M1,1 L1,5" class="marker" stroke="red" stroke-width=0.25></path>
</svg>

核心问题 #

• 元素对齐点错误：offset-path默认会把元素边界框的左上角对齐到路径上，而你的红色线条.marker的path是M1,1 L1,5，它的左上角在(1,1)，并不是线条的几何中心，所以运动时会和圆形轨迹错位。
• 元素自身坐标系未适配：offset-path会将元素的坐标系绑定到路径的局部坐标系，但你的线条不是以原点为中心绘制的，导致整体偏移。

解决方式 #

方法1：修改运动元素的path，让它以原点为中心 #

把红色线条改成以(0,0)为中心的线段，这样动画时线条中心会沿着圆形路径移动，刚好贴合轨迹，延长线也会穿过圆心：

<path d="M0,-2 L0,2" class="marker" stroke="red" stroke-width=0.25></path>

方法2：用CSS强制元素中心对齐路径 #

如果不想修改path，直接给.marker添加offset-anchor属性，指定用元素的边界框中心对齐路径：

.marker {
  /* 其他样式不变 */
  offset-anchor: 50% 50%;
}

修正后的完整代码 #

CSS

body {
  display: flex; /* 补上display:flex，否则justify-center不生效 */
  justify-content: center;
}

.track {
  stroke: #ccc;
}

.marker {
  offset-path: path('M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
  /* 方法2用这行，方法1可以去掉 */
  /* offset-anchor: 50% 50%; */
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

HTML

<svg viewbox="0,0 25,25" width="200px" height="200px">
  <!-- 参考路径 -->  
  <path 
       class="track"
       fill="none"
       stroke-width="0.25"
       d="M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"
  />
  <!-- 运动元素：以原点为中心的线段 -->
  <path d="M0,-2 L0,2" class="marker" stroke="red" stroke-width=0.25></path>
</svg>

补充说明 #

• offset-path的本质是将元素的坐标系“吸附”到路径上，元素的位置是相对于路径当前点的局部坐标系。让运动元素自身以原点为中心绘制，是最直观的适配方式。
• 原代码中body的justify-content:center没有生效，因为缺少display:flex，已经在修正代码中补上了。

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