css - 链接上的 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 过渡动画背景。