svg动画

将下面代码嵌入HTML中，直接运行即可。动画时长、小球半径，以及起始位置可自行更改。

 <svg height="150" width="200" style="position:absolute;margin-top: 200px;">
     <circle cx="29" cy="60" r="2" stroke="rgb(41,238,242)" stroke-width="1" fill="rgb(41,238,242)"></circle>
         <line x1="30" y1="60" x2="80" y2="60" style="stroke:rgb(41,238,242);stroke-1"></line>
         <line x1="80" y1="60" x2="120" y2="3" style="stroke:rgb(41, 238, 242);stroke-1"></line>
         <circle cx="119" cy="3" r="2" stroke="rgb(41,238,242)" stroke-width="1" fill="rgb(41,238,242)"></circle>
         <circle cx="0" cy="0" r="2" stroke="rgb(0,255,157)" stroke-width="1" fill="rgb(0,255,157)">
         <animateMotion path="M 30 60 L 80 60 L 120 3" begin="0s" dur="3s" repeatCount="indefinite">
         </animateMotion>
     </circle>
</svg>