Доброго времени суток!
Уже не первый день ломаю голову на тему того, как сделать анимацию иконки svg при наведении на нее мышкой и возврат к стоковой, после того, как мышь убрана.
Имеется следующий код (см. ниже), где id="btn_aPlay_stok" — фигура по умолчанию, а id="btn_aPlay_hover" — при наведении мышкой. Пытаюсь реализовать следующее: по-умолчанию отображается элемент id="btn_aPlay_stok", а при наведении он должен меняться на id="btn_aPlay_hover". В данный момент реализовал подобное двумя разными svg-файлами и свойством "opacity" посредством css, но хотелось бы сделать именно анимацию. Как это можно реализовать?
<svg id="btn_aPlay" width="20px" height="20px" fill="#d2e1ff"
xmlns="http://www.w3.org/2000/svg">
<g id="btn_aPlay_stok">
<g transform="matrix(1 0 0 -1 0 30)">
<rect x="4" y="19" width="4" rx="2">
<animate attributeName="height" begin="0s" dur="2.6s" values="12;8;3;12;8;3;12;8;3;12" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect x="10" y="19" width="4" rx="2">
<animate attributeName="height" begin="0s" dur="2s" values="3;12;3;6;12;3;6;12;3" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect x="16" y="19" width="4" rx="2">
<animate attributeName="height" begin="0s" dur="2s" values="3;8;10;3;8;10;3;8;10;3" calcMode="linear" repeatCount="indefinite" />
</rect>
</g>
<rect x="4" y="7" width="4" rx="2">
<animate attributeName="height" begin="0s" dur="2.6s" values="12;8;3;12;8;3;12;8;3;12" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect x="10" y="7" width="4" rx="2">
<animate attributeName="height" begin="0s" dur="2s" values="3;12;3;6;12;3;6;12;3" calcMode="linear" repeatCount="indefinite" />
</rect>
<rect x="16" y="7" width="4" rx="2">
<animate attributeName="height" begin="0s" dur="2s" values="3;8;10;3;8;10;3;8;10;3" calcMode="linear" repeatCount="indefinite" />
</rect>
</g>
<g id="btn_aPlay_hover">
<rect x="4" y="7" width="4" height="4" rx="2" />
<rect x="10" y="2" width="4" height="14" rx="2" />
<rect x="16" y="2" width="4" height="14" rx="2" />
</g>
</svg>