链接上的SVG背景 - 在悬停时动画一次

Question

我将SVG设置为链接的背景图像。当您将鼠标悬停在链接上时，将显示SVG并播放动画一次然后停止。这很有效，除非您第二次将鼠标悬停在链接上（或任何其他具有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);
}

Answer 1

最后，我使用背景位置和CSS过渡来为背景设置动画。