css - リンクの SVG 背景 - ホバー時に 1 回アニメーション化する

Question

リンクの背景画像として SVG を設定しています。リンクの上にカーソルを置くと、SVG が表示され、アニメーションが 1 回再生されてから停止します。これはうまく機能しますが、もう一度リンク (または SVG バックグラウンドを持つ他のリンク) にカーソルを合わせると、アニメーションは最初からやり直されません。

アニメーションをループするように設定する以外に、ホバーごとに SVG を再起動する方法はありますか? これは SVG のコードです。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" id="All_glyphs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="20px" viewBox="0 0 10 20" xml:space="preserve">
    <rect x="0" y="20" width="10" height="20" fill="#7fffe5">
        <animate attributeName="y" from="20" to="0" dur="500ms" fill="freeze" repeatCount="0"/>
    </rect>
</svg>

そして私が使用するCSS：

a:hover {
    background-image: url(link.svg);
}