По клику нужно чтобы анимация останавилась на паузу,а потом по ещё одному клику воспроизвелась с тогоже места но в обратном направлении,как сделать?
var play = document.querySelector(".play"),
pause = document.querySelector(".pause"),
reverse = document.querySelector(".reverse"),
animType = document.getElementById("forward"),
backward = document.getElementById("backward"),
svg = document.getElementById("svg");
play.addEventListener('click', function() {
animType.beginElement();
console.log(play, animType);
}, false);
pause.addEventListener('click', function() {
animType.endElement();
// svg.pauseAnimations();
}, false);
reverse.addEventListener('click', function() {
// backward.endElement();
svg.unpauseAnimations();
}, false);
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80%" height="100%" viewBox="0 0 282.7 53.8" style="enable-background:new 0 0 282.7 53.8;" xml:space="preserve">
<path class="st0" fill="none" width="200px" stroke="green" id="p" d="M0.5,33.1c0.5-1.6,4.8-15.8,18.7-20.6c1.7-0.6,8.8-2.9,17.1-0.4c7.6,2.3,12,7.4,16.7,12.7
c8.4,9.7,6.9,13.5,13.5,19c6.5,5.5,13.8,6.6,19.8,7.5c4.3,0.7,18.5,2.9,31.7-4.4c2.5-1.4,3.1-2,23.4-24.2 c7.8-8.6,12.2-13.2,19.8-17.5c9.5-5.2,15.1-4.9,16.7-4.8c1.4,0.1,10.9,1.1,15.9,8.3c5.8,8.5-1.6,15.6,4.4,26.6 c0.6,1,4.3,7.8,12.3,11.1c3,1.3,8.6,3.6,12.7,1.2c4.1-2.3,3.6-7.3,7.1-23.4c3-13.8,4.6-16,6.3-17.5c5.1-4.4,13.2-4.6,19-2.4 c9.8,3.7,15.2,15.1,16.3,23.8c1.1,9.4-2.8,15,1.2,20.2c2.5,3.3,6.6,4.4,9.5,4.8"
/>
<path id="p" d="M50 20 Q80 0 70 30 T 70 70 T 30 70 T30 30Z" fill="none" stroke="gray" marker-start="url(#start)"></path>
<circle r="4" fill="green" fill-opacity="0.7">
</circle>
<rect x="0.5" y="0.5" class="st0" fill="none" stroke="gray" width="33.7" height="26.6">
<animateMotion id="forward" dur="5s" begin="indefinite" fill="freeze" keyPoints="0.3;1;0;0.3" keyTimes="0;0.7;0.7;1" calcMode="linear">
<mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#p"></mpath>
</animateMotion>
<animateMotion id="backward" begin="indefinite.end + 1s" dur="5s" fill="freeze" keyPoints="0.3;0;1;0.3" keyTimes="0;0.3;0.3;1" calcMode="linear">
<mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#p"></mpath>
</animateMotion>
<animateMotion id="three" begin="forward.end + 1s" dur="10s" fill="freeze" keyPoints="0.3;0;1;0.3" keyTimes="0;0.3;0.3;1" calcMode="linear">
<mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#p"></mpath>
</animateMotion>
</rect>
</svg>
<div class="play">Play</div>
<div class="pause">Pause</div>
<div class="reverse">Reverse</div>