При клике на элемент происходит анимация, но можно ли вернуть элемент в исходное состояние при повторном клике. (Сделать обратную анимацию)
const btn = document.querySelector('div[role="button"]');
const micro = document.querySelectorAll('.micro');
btn.onclick = () => {
micro.forEach((e) => {
e.beginElement();
});
}
div[role="button"] {
border: 0.0625rem solid;
width: 68px;
font-size: 0;
}
<div role="button">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="68" height="68" viewBox="0 0 24 24">
<g>
<rect id="top-part" x="9" y="3.5" width="6" height="12" rx="3" fill="#5A8CF6"/>
<animate class="micro" xlink:href="#top-part" attributeName="height" from="12" to="6" dur="400ms" begin="indefinite" fill="freeze" />
<animate class="micro" id="drill" xlink:href="#top-part" attributeName="y" from="3.5" to="9" begin="indefinite" dur="400ms" fill="freeze" />
</g>
<g stroke="#5A8CF6" fill="none">
<g>
<circle id="baloon" cx="12" cy="12" r="6" stroke-width="1.5" stroke-dasharray="37.7" stroke-dashoffset="18.8"/>
<animate xlink:href="#baloon" attributeName="stroke-dashoffset" from="18.8" to="0" dur="300ms" begin="drill.end" fill="freeze"/>
</g>
<g>
<rect id="leg" x="11" y="18" width="2" height="4" fill="#5A8CF6" stroke="none" transform-origin="top"/>
<animate class="micro" xlink:href="#leg" attributeName="height" from="4" to="0" dur="400ms" begin="indefinite" fill="freeze" />
</g>
</g>
</svg>
</div>