绘制路径上的动画 svg

Question

我正在尝试为一个圆圈设置动画以沿着绘制的路径移动，但圆圈正在偏离轨道并以圆周运动旋转但来回而不是顺时针旋转。

<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3" d="M303.5,107c0,7-4.8,12.7-12.7,12.7c-7.9,0-12.6-5.7-12.6-12.7c0-7,4.8-12.7,12.6-12.7 C298.5,94.3,303.5,100,303.5,107"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>

第一条路径是直线，第二条路径是圆。不知道怎么转成。

Answer 1

您制作动画的路径必须以 svg 画布的原点为中心。您可以重写路径的代码或将其转换为原点

<svg viewBox="60 60 360 360" width="300">
<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3" transform="translate(-290.85,-107)" d="M303.5,107c0,7-4.8,12.7-12.7,12.7c-7.9,0-12.6-5.7-12.6-12.7c0-7,4.8-12.7,12.6-12.7 C298.5,94.3,303.5,100,303.5,107"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>
</svg>

这是我重写#XMLID_15_ 路径的第二个示例（这是应该设置动画的路径）。为了重写路径，我使用这支笔将您的路径转换为全相对路径：https://codepen.io/leaverou/pen/RmwzKv

一旦我拥有了所有相对位置，我可以通过将实际中心的值从移动到的坐标中休息来将第一次移动更改为命令 (M)。

<svg viewBox="60 60 360 360" width="300">
<g id="XMLID_5_" >
        <path id="XMLID_38_" class="st9" d="M198.7,67.8c-73.6,0-133.3,59.7-133.3,133.3s59.7,133.3,133.3,133.3S332,274.7,332,201.1
            S272.3,67.8,198.7,67.8z M199.1,330.6c-71.8,0-129.9-58.2-129.9-129.9S127.3,70.8,199.1,70.8S329,129,329,200.7
            S270.8,330.6,199.1,330.6z"/>
        <path id="XMLID_15_" class="st3"  d="M12.65,0c0,7,-4.8,12.7,-12.7,12.7c-7.9,0,-12.6,-5.7,-12.6,-12.7c0,-7,4.8,-12.7,12.6,-12.7c7.7,0,12.7,5.7,12.7,12.7"/>
        <animateMotion 
           xlink:href="#XMLID_15_"
           dur="5s"
           begin="0s"
           repeatCount="indefinite">
            <mpath xlink:href="#XMLID_38_"/>
      </animateMotion>
    </g>
</svg>

观察：

如果您问自己为什么会出现这种奇怪的运动：#XMLID_38_ 路径是一条带有孔的路径，您可以在其中沿一个方向绘制路径的第一部分，然后您移动到不同的点并在相反的方向绘制孔方向。这就是为什么动画形状首先向一个方向移动，然后跳到不同的点并继续向相反方向移动，就像您用作轨道的路径一样。