Пример svg-анимации - работа механизма

Здесь приведен пример анимации планетарного механизма, реализованный с помощью svg-графики. Ни скрипты, ни дополнительные библиотеки для реализации этого примера не использовались. Только чистый svg-код. Для запуска механизма нажмите кнопку "Старт", а для остановки - кнопку "Стоп". Такую анимацию, например, можно использовать для демонстрации на учебном сайте по механике. Здесь применена базовая декларативная анимация (SMIL), которая скорее всего не будет работать в Internet Explorer. Да и это уже не важно, поскольку скорее всего этот браузер сойдет с дистанции в ближайшее время. На сегодняшний день существует уже не один способ создавать SVG анимацию. Есть большое число специальных библиотек, например, Snap.svg или SVG.js упрощающих работу с анимацией. Но и в чистом виде, можно довольно быстро и эффективно реализовывать вполне сложные задачи анимации, вплоть до создания игр. Для тех, кого заинтересовала возможность нарисовать что-то подобное, приведем ниже код, созданной здесь движущейся картинки. Исходник кода найден где-то на просторах интернета, а первоисточник, кажется находится здесь. Но, увы, анимация не во всех браузерах работает так как хотелось бы. Например в старых Операх залипают и не работают кнопки старта и остановки.
<svg width="350" height="350" version="1.1" viewBox="0 0 350 350" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' style = "border: 0px dashed dodgerblue" > <title>svg-анимация механизма</title> <desc>пример интерактивной анимации</desc> <defs> <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="14" height="10" rx="2" fill="blue"/> </marker> <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none; marker-end: url(#MarkerArrow); marker-start: url(#MarkerArrow); stroke:grey; stroke-width:6; "> </line> <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="7" height="3.5" rx="2" fill="grey"/> </marker> <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none; marker-end: url(#MarkerArrow-s1); marker-start: url(#MarkerArrow-s); stroke:grey; stroke-width:2; " > </line> </defs> <g transform = "translate(30,50)"> <g id="coleso"> <g> <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" /> <use xlink:href="#line1" transform="rotate(0 100 100)"/> <use xlink:href="#line1" transform="rotate(120 100 100)"/> <use xlink:href="#line1" transform="rotate(240 100 100)"/> <circle cx="100" cy="100" r="15" style="stroke: blue; fill:none; stroke-width: 4px;" /> <circle cx="100" cy="100" r="50" style="stroke: blue; fill:none; stroke-width: 15px;" /> <circle cx="100" cy="100" r="60" style="stroke: blue; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" /> <circle cx="150" cy="100" r="3" style="stroke: grey; fill:yellow; " /> </g> </g> <g id="col-small"> <g> <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" /> <use xlink:href="#line-s" transform="rotate(0 188 100)"/> <use xlink:href="#line-s" transform="rotate(120 188 100)"/> <use xlink:href="#line-s" transform="rotate(240 188 100)"/> <circle cx="188" cy="100" r="8" style="stroke: grey; fill:none; stroke-width: 4px;" /> <circle cx="188" cy="100" r="18" style="stroke: grey; fill:none; stroke-width: 7px;" /> <circle cx="188" cy="100" r="24" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="206" cy="100" r="3" style="stroke: grey; fill:yellow; " /> </g> </g> <g id="planetar" > <g> <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" /> <circle cx="100" cy="100" r="116" style="stroke: blue; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="100" cy="100" r="124" style="stroke: blue; fill:none; stroke-width: 12px;" /> <circle cx="224" cy="100" r="3" style="stroke: grey; fill:yellow; " /> </g> </g> <g > <use xlink:href="#col-small" transform="rotate(240 100 100)" /> <use xlink:href="#col-small" transform="rotate(120 100 100)" /> </g> <g transform = "translate(0,150)"> <g id="gO1"> <rect x="45" y="115" height="20" width="60" rx="5" fill="green" stroke="orange"/> <text x="57" y="130" font-size="16" fill="white">Старт</text> </g> <g id="stop1"> <rect x="110" y="115" height="20" width="60" rx="5" fill="crimson" stroke="orange"/> <text x="124" y="130" font-size="16" fill="white" >Стоп</text> </g> </g> </g> </svg>