使用animateMotion实现圆形沿椭圆路径动画时偏移问题求助

我尝试实现圆形沿椭圆路径动画，但使用<animateMotion>标签时，圆形会先向右下偏移，再进行路径动画。

原始代码 #

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  height: 25%;
  aspect-ratio: 1;
  fill: none;
  stroke: rosybrown;
  overflow: visible;
}

svg circle {
  fill: peru;
  stroke: none;
}

HTML #

<svg viewBox="20 60 100 100" xmlns="http://www.w3.org/2000/svg">
      <path
        id="path-1"
        className="path-1"
        translate="-50% -50%"
        d="M53.194026947021484,109.28645324707031C53.194026947021484, 82.82719674465584, 62.81193748083353, 61.37773132324219, 74.67623138427734, 61.37773132324219,C86.54052528772115, 61.37773132324219, 96.1584358215332, 82.82719674465584, 96.1584358215332, 109.28645324707031,C96.1584358215332, 135.74570974948477, 86.54052528772115, 157.19517517089844, 74.67623138427734, 157.19517517089844,C62.81193748083353, 157.19517517089844, 53.194026947021484, 135.74570974948477, 53.194026947021484, 109.28645324707031,z"
      />
      <circle
        className="page-1"
        ref="{page1Ref}"
        cx="60.184269"
        cy="75.187714"
        r="3.9213545"
      >
        <animateMotion dur="3s" repeatCount="indefinite">
          <mpath href="#path-1" />
        </animateMotion>
      </circle>
</svg>

解决思路 #

1. 移除circle的cx、cy属性：当使用animateMotion时，circle的cx和cy会作为偏移量叠加到路径动画上，导致初始位置偏移。移除这两个属性后，圆形会以路径起点为初始位置开始动画。
2. 移除path上无效的translate属性：SVG中没有translate属性，该属性无实际作用，直接移除即可（若需位移应使用transform="translate(...)"）。

修改后的代码 #

CSS #

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      width: 100vw;
      background-color: #212121;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    svg {
      height: 25%;
      aspect-ratio: 1;
      fill: none;
      stroke: rosybrown;
      overflow: visible;
    }

    svg circle {
      fill: peru;
      stroke: none;
    }

HTML #

<svg viewBox="20 60 100 100" xmlns="http://www.w3.org/2000/svg">
          <path
            id="path-1"
            className="path-1"
            d="M53.194026947021484,109.28645324707031C53.194026947021484, 82.82719674465584, 62.81193748083353, 61.37773132324219, 74.67623138427734, 61.37773132324219,C86.54052528772115, 61.37773132324219, 96.1584358215332, 82.82719674465584, 96.1584358215332, 109.28645324707031,C96.1584358215332, 135.74570974948477, 86.54052528772115, 157.19517517089844, 74.67623138427734, 157.19517517089844,C62.81193748083353, 157.19517517089844, 53.194026947021484, 135.74570974948477, 53.194026947021484, 109.28645324707031,z"
          />
          <circle
            className="page-1"
            ref="{page1Ref}"
            r="3.9213545"
          >
            <animateMotion dur="3s" repeatCount="indefinite">
              <mpath href="#path-1" />
            </animateMotion>
          </circle>
    </svg>

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