在绘制的路径上动画 svg

Question

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

<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 的原点为中心 canvas。您可以重写路径代码或将其转换为原点

<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_ 路径是一条带孔的路径，你可以在其中绘制路径的第一部分，然后移动到另一个点并绘制反方向开孔。这就是为什么动画形状首先朝一个方向移动，然后跳到不同的点并继续朝相反的方向移动，就像您用作轨道的路径一样。

在绘制的路径上动画 svg

Animate svg on path drawn

html

svg

svg-animate

观察：