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>

Мне нужно переместить красный круг на полилинии контура сначала в одном направлении, а затем обратно. Зеленый круг двигался вдоль линии, сначала в одном направлении, а затем назад.

0 ответов

Другие вопросы по тегам