SVG <animateMotion>
Может кто-нибудь объяснить мне, как сделать круг движения вдоль полилинии и круг движения вдоль линии?
#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>
Мне нужно переместить красный круг на полилинии контура сначала в одном направлении, а затем обратно. Зеленый круг двигался вдоль линии, сначала в одном направлении, а затем назад.