SVG animateMotion实现往返交替动画时keyPoints/keyTimes失效如何解决

• 核心问题：<animateMotion>默认的calcMode属性值为paced，该模式下浏览器会自动根据路径总长度计算匀速运动，直接忽略手动配置的keyPoints、keyTimes属性，这是往返关键帧不生效的根本原因。
• 额外问题：id为path1的路径d属性末尾多余了M200,350移动指令，会干扰路径总长度计算，建议删除避免运动异常。

给<animateMotion>标签添加calcMode="linear"属性，让浏览器严格按照自定义的关键帧参数执行动画，即可实现0→1→0的方向交替往返循环效果，同时清理路径里多余的指令片段。如果需要更顺滑的加减速往返效果，也可以把calcMode设置为spline，配合keySplines属性配置运动缓动曲线，基础往返效果用linear即可满足需求。

<svg width="200" height="200" viewBox="0 0 700 700">
  <g>
      <path id="path1" d="M200,350 C 200,440 400,150 400,250"
            fill="none" stroke="blue" stroke-width="7.06"  />

      <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
            fill="yellow" stroke="red" stroke-width="7.06"  />

        <animateMotion 
          calcMode="linear"
          keyPoints="0;1;0" 
          keyTimes="0;0.5;1" 
          dur="6s" 
          repeatCount="indefinite" 
          rotate="auto" >
          <mpath href="#path1"/>
        </animateMotion>
  </g>     
</svg>

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