有人可以向我解释如何沿着折线和运动圆沿着直线制作运动圆吗?
#braine{
position: absolute;
left: 30%;
width: 900px;
height: 900px;
}
.st0{fill:none;stroke:#000000;stroke-width:1;stroke-miterlimit:10;}

<svg version="1.1" id="braine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 235 235" style="enable-background:new 0 0 235 235;" xml:space="preserve">
<polyline id="l143" class="st0" points="50.9,35.6 59.8,35.5 59.9,50.3 67.9,58.2 68,82.7 "/>
<line id="l96" class="st0" x1="93.7" y1="111.1" x2="101.6" y2="111.1"/>
<circle id="circle1" r="1" cx="40" cy="40" fill="red"/>
<animateMotion
xlink:href="#circle1"
dur="5s"
begin="0s"
fill="freeze"
repeatCount="indefinite">
<mpath xlink:href="#l143" />
</animateMotion>
<animate
xlink:href="#circle1"
attributeName="r"
values="1; 1.5; 1"
keyTime="0; 0.5; 1"
dur="500ms"
repeatCount="indefinite"
/>
<circle id="circle2" r="1" cx="90" cy="110" fill="green"/>
<animateMotion
xlink:href="#circle2"
dur="5s"
begin="0s"
fill="freeze"
repeatCount="indefinite">
<mpath xlink:href="#l196" />
</animateMotion>
<animate
xlink:href="#circle2"
attributeName="r"
values="1; 1.5; 1"
keyTime="0; 0.5; 1"
dur="500ms"
repeatCount="indefinite"
/>
</svg>
&#13;
我需要首先在一个方向上移动轮廓折线上的红色圆圈然后再返回。一个绿色圆圈沿着线移动,首先在一个方向然后向后移动。