Добрый день уважаемые, подскажите пожалуйста как перевести параметры из SMIL анимации в разряд JS анимации. Приведу пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg width="300" height="200">
<defs>
<path id="base" d="M150 100m0-50a100 50 0 0 0 0 100a100 50 0 0 0 0-100z" fill="none">
<animate attributeName="stroke-dasharray" from="0 485" to="485 0" begin="0s" dur="2s"/>
<animate attributeName="stroke-dashoffset" from="0" to="242.5" begin="0s" dur="2s"/>
</path>
</defs>
<use xlink:href="#base" stroke="orange" stroke-width="14"/>
<use xlink:href="#base" stroke="yellow" stroke-width="10"/>
</svg>
</body>
</html>
Необходимо что б по непарному клацанью мыши кольцо отрисовывалось, а при парном анимация уходила в обратном направлении (в SMIL анимации это просто поменять местами параметры from и to) как данное чудо организовать на JS ? Посоветуйте что то дельное
