如何在悬停时停止 SVG animateMotion？答案

【问题标题】：How to stop SVG animateMotion on hover?如何在悬停时停止 SVG animateMotion？
【发布时间】：2017-06-22 14:06:55
【问题描述】：

我正在使用路径：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400" xml:space="preserve">
<g class="path path--1">
    <path class="path_layer" id="path1" d="M200,240c-80,0 -80,-80 0,-80c80,0 80,80 0,80" stroke="#333333" stroke-width="2" fill="none"/>
</g>
<circle r="5" fill="white" id="planet">
        <title>Computer Science</title>
        <animateMotion dur="15s" repeatCount="indefinite" keyPoints="0.5;0;1;0.5" keyTimes="0;0.5;0.5;1" calcMode="linear">
            <mpath xlink:href="#path1" /> 
        </animateMotion>
</circle>

我将沿着它为圆圈设置动画，如上图所示。

现在，我想在悬停时停止动画，知道怎么做吗？当我将鼠标悬停在圆圈上时，我想停止动画，然后从我停止的地方恢复它。 CSS方式不适用于此。我应该用JS吗，如果用，怎么用？

【问题讨论】：

不，这是一个 SVG，SVG 的元素不能使用给出的答案来控制。

标签： javascript html css svg css-animations

【解决方案1】：

您可以使用 SVG DOM 来暂停和取消暂停动画时间线。 <svg> element's interface 有以下有用的方法：

pauseAnimations(); // pauses the SMIL animation
unpauseAnimations(); // resumes the SMIL animation

setCurrentTime(); // changes the timeline thereby allowing you to rerun an animation

【讨论】：

如果我有多个圆圈动画，这将阻止所有圆圈，你能告诉我如何避免这种情况吗？
您可以尝试通过 iframe 或对象标签将它们放在单独的文档中。其他替代方法，例如记录动画状态，然后删除并重新创建动画会更难，但并非不可能。