1

我将 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);
}
4

1 回答 1

1

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

于 2013-12-14T17:58:51.250 回答