Есть 2 анимации, одна рисует круг, 2я скрывает его, обе работают по клику, по умолчанию круг скрыт и на клик навешана анимация отрисовки круга. Как сделать так чтобы после отрисовки круга на клике стала анимация его сокрытия и наоборот?
<circle r="50" cx="100" cy="100" stroke-width="20" stroke-dasharray="0 314" style="fill: red;stroke: rgba(255,255,0,.5);" id="circle-s">
<animate attributeName="stroke-dasharray" begin="click" dur="1s" from="0 314" to="314 314" repeatCount="1" fill="freeze" href="#circle-s" id="show"/>
<animate attributeName="stroke-dasharray" begin="click" dur="1s" from="314 314" to="0 314" repeatCount="1" fill="freeze" href="" id="hide"/>
</circle>