Как изменить форму svg фигуры, чтобы при наведении мышки она «перетекала» из одной в другую, и вернулась обратно, если мышь убрать?

Доброго времени суток!
Уже не первый день ломаю голову на тему того, как сделать анимацию иконки 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>