Black_Star,
как вариант, но предполагаю что js для этого не нужен
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var f = [["0 485","485 0"],["0","242.5"]];
$('svg').click(function() {
$('animate',this).each(function(indx, el){
var k = f[indx].reverse();
$(el).attr({from : k[0], to : k[1]})
});
})
});
</script>
</head>
<body>
<svg width="300" height="200" id="startButton">
<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;startButton.click" dur="2s"/>
<animate attributeName="stroke-dashoffset" from="0" to="242.5" begin="0s;startButton.click" 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>