Есть рисунок svg -шный , там необходимо чтоб лента (белого цвета) по нажатию мигала зеленым цветом ,а коробок медленно двигался по этой ленте , при повторном нажатии останавливался или же дальше двигалась коробочка по ленте . Как можно это реализовать ?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<script src="biblioteka/bibl.jquery"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="biblioteka/Chart.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<meta charset="UTF-8">
<title>СЕВГОК</title>
</head>
<header id="header-1">
<p class="pump1">ЧАО "ЦГОК" ЦПО 1 УЧАСТОК №2<br>
Гистограммы распределения гранулометрического состава окатышей<br>
по чашевым окомкователям</p>
</header>
<div id="clock" style="height:40px">
<script>
setInterval(function(){
var d = new Date();
document.getElementById('clock').innerHTML = d.toLocaleTimeString();
},1000);
</script>
</div>
<body>
<script type="text/javascript" src = "javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="but1" >Пуск конвейера</button>
<div class="container">
<div id="icon" style= "text-align:center;">
<!-- КОНВЕЙЕР -->
<object id="convier" type="image/svg+xml" data="images/CONVIER.svg" width="1920" height="600"></object>
</div>
</div>
<div id="mainmenu">
<ul>
<li><a href="index.php">График реальный</a></li>
<li><a href="page2.php">График за час</a></li>
<li><a href="page3.php">График за смену</a></li>
<li><a href="page4.php">График за сутки</a></li>
</ul>
</div> <!--первый график-->
</body>
</html>
ОБЬЕКТ КОРОБКА
<g>
<rect x="-1242" y="1847.9" id="st3" width="616" height="592"/>
<rect x="-1098" y="2023.9" id="st4" width="344" height="264"/>
<rect x="-1091" y="2103.9" id="st5" width="336" height="80"/>
<g>
<rect x="-952.4" y="1493.1" id="st3" width="30.5" height="164"/>
<rect x="-1186" y="1555.7" transform="matrix(0.866 -0.5 0.5 0.866 -975.6908 -365.9571)" id="st3" width="30.5" height="164"/>
<rect x="-1357" y="1726.7" transform="matrix(0.5 -0.866 0.866 0.5 -2237.2253 -257.6283)" id="st3" width="30.5" height="164"/>
<rect x="-547.8" y="1726.7" transform="matrix(0.5 0.866 -0.866 0.5 1300.0775 1365.5593)" id="st3" width="30.5" height="164"/>
<rect x="-718.8" y="1555.7" transform="matrix(0.866 0.5 -0.5 0.866 724.5828 571.1907)" id="st3" width="30.5" height="164"/>
</g>
</g>
ЛЕНТА
<path id="st1" d="M8440.2,3728.9H-2280.6c-331.4,0-600-268.6-600-600v0c0-331.4,268.6-600,600-600l10720.8,0
c331.4,0,600,268.6,600,600v0C9040.2,3460.3,8771.6,3728.9,8440.2,3728.9z"/>
СТИЛИ
<style type="text/css">
#st0{fill:#FC1717;stroke:#000000;stroke-miterlimit:10;}
#st1{fill:none;stroke:#FFFFFF;stroke-width:20;stroke-linecap:round;stroke-miterlimit:10;}
#st2{stroke:#000000;stroke-miterlimit:10;}
#st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
#st4{fill:#F48282;stroke:#000000;stroke-miterlimit:10;}
#st5{fill:#FF0000;stroke:#000000;stroke-miterlimit:10;}
</style>