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

绘制路径上的SVG动画

1 个答案:

观察：