我想创建一个具有动画属性的SVG，可以在鼠标悬停时继续动画。
在鼠标移开时，我希望动画在结束之前持续到其持续时间的结束。
我无法实现这一目标，因为我的动画总是突然结束。
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple color fill -->
<circle cx="50" cy="50" r="40" fill="teal" >
<animate attributeName="fill" values="teal;cyan;teal;" dur="1s" calcMode="paced" repeatCount="indefinite" begin="mouseover" end="mouseout" />
</circle>
</svg>
理解，我们可以通过添加fill="freeze"属性来获得稍微无缝的感觉。
但是，它带回了颜色与停下来的颜色不同的问题。
有什么主意，如何仅通过使用svg属性就可以在鼠标悬停时创建平滑的动画？
我希望不要使用Javascript。