Question

我正在使用路径：

<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，如果是，怎么做？

Answer 1

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

a x ls = foldl (flip ($)) x ls $ []

如何在悬停时停止SVG animateMotion？

1 个答案: