我有一个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);
}
最后,我使用了背景位置和CSS转换来制作背景动画。