全部问题

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="100%" y2="0%">
	    <stop offset="0%" stop-color="dodgerblue" />
		<stop offset="100%" stop-color="white" />
		
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="skyblue" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/>
  </g>
</svg>

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.528571429;
  padding: 0;
  height: 100%;
}
body #contact {
  height: calc(100vh - 40px);
  background-color: #ffffff;
}
body #contact .to-top-btn-wrapper {
  position: absolute;
  z-index: 999;
  left: 7%;
  bottom: 15%;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper {
  margin: -35px auto;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper .btn-text {
  font-size: 14px;
  letter-spacing: 0.25em;
  text-align: center;
  color: #676565;
  text-transform: uppercase;
}
body #contact .to-top-btn-wrapper .to-top-btn {
  position: absolute;
  top: 0;
  left: 35px;
  bottom: 25px;
  cursor: pointer;
}
body #contact .to-top-btn-wrapper .to-top-btn .line {
  border-right: 0.1rem dashed #676565;
  display: inline-block;
  animation: show 1000ms linear forwards infinite;
}
body #contact .to-top-btn-wrapper .to-top-btn .arrow {
  position: absolute;
  top: -0.3rem;
  bottom: 0;
  height: 1rem;
  border-right: 0.1rem solid #676565;
  display: inline-block;
}
body #contact .to-top-btn-wrapper .to-top-btn .right {
  left: 0.3rem;
  transform: rotate(-45deg);
}
body #contact .to-top-btn-wrapper .to-top-btn .left {
  right: 0.3rem;
  transform: rotate(45deg);
}
@keyframes show {
  0% {
    height: 5rem;
  }
  100% {
    height: 0rem;
  }
}

<section id="contact" class="container-fluid">
  <div class="to-top-btn-wrapper">
    <div class="btn-text-wrapper">
      <span class="btn-text">Scroll to top</span>
    </div>
    <div class="to-top-btn">
      <span class="arrow left"></span>
      <span class="line"></span>
      <span class="arrow right"></span>
    </div>
  </div>
</section>

<div id="pathContainer4">
		<button id="btn1" onclick="forwardSVG()">forward</button />
		<button id="btn2" onclick="middleSVG()">Middle</button />
		<button id="btn3" onclick="backSVG()">Back</button />
</div>	
<svg  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" height="160" width="360" >
  <g fill="none" stroke="black" stroke-width="1">
    <path stroke-dasharray="3" id="motionpath2"
					d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
  </g>
   <circle class="circle2" r=8 fill=red>
  			         
	 <animateMotion
	   id="forward"
	   dur="2s"
	   begin="indefinite"
	   repeatCount="1"
	   keyPoints="0;1"
	   keyTimes="0;1"
       calcMode="linear"	   >
		 <mpath href="#motionpath2" />
	 </animateMotion> 
		<animateMotion
		   id="middle"
		   dur="2s"
		   begin="indefinite"
		   repeatCount="1"
		   keyPoints="0.5;1"
		   keyTimes="0;1"
		   calcMode="linear"					>
		 <mpath href="#motionpath2" />
	    </animateMotion> 
		   <animateMotion
		   id="back"
		   dur="2s"
		   begin="indefinite"
		   repeatCount="1"
		   keyPoints="1;0"
		   keyTimes="0;1"
		   calcMode="linear"					>
		 <mpath href="#motionpath2" />
	    </animateMotion>
         </circle>
		</svg>
		
<script>
var animation1 = document.getElementById("forward")
function forwardSVG(){
     animation1.beginElement();
} 
var animation2 = document.getElementById("middle")
function middleSVG(){
     animation2.beginElement();
}  

var animation3 = document.getElementById("back")
function backSVG(){
     animation3.beginElement();
}
</script>