如何从最后一个停止点重复SVG中的动画

Question

我已经动画了一条路径，该路径始于moseover，并在鼠标out上停止 重置动画，fill =" freeze"只需停止它，但是当我再次鼠标启动时，它是从开始

<svg xmlns="w3.org/2000/svg"; viewBox="0 0 500.1 489.1" class="svg-gears"> 
  <rect id="deepPink-rectangle" width="300" height="300" x="100" y="100" fill="deepPink" >
    <animateTransform
      attributeName="transform" 
      type="rotate"
      dur="6s"
      from="0 315 184"
      to="360 315 184"
      repeatCount="indefinite"
      begin="mouseover"
      end="mouseout"
    />
  </rect>
</svg>

如何从最后一个冻结位置继续？

Answer 1

您无法使用SMIL动画实现此目标，但是可以轻松使用具有animation-play-state="paused"的CSS动画来实现这一目标：

#deepPink-rectangle {
  animation: rotate 6s linear infinite;
  animation-play-state: paused;
  transform-origin: 250px 250px;
}
#deepPink-rectangle:hover {
  animation-play-state: running;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

<svg viewBox="0 0 500.1 489.1">
  <rect id="deepPink-rectangle" width="300" height="300" x="100" y="100" fill="deepPink" />
</svg>

Answer 2

如果要坚持使用Smil动画，则需要使用一点JavaScript。

var svg = document.querySelector(".svg-gears");
svg.pauseAnimations();
svg.addEventListener("mouseover", function() {
  svg.unpauseAnimations();
});
svg.addEventListener("mouseout", function() {
  svg.pauseAnimations();
});

<svg xmlns="w3.org/2000/svg"; viewBox="0 0 500.1 489.1" class="svg-gears"> 
  <rect id="deepPink-rectangle" width="300" height="300" x="100" y="100" fill="deepPink" >
    <animateTransform
      attributeName="transform" 
      type="rotate"
      dur="6s"
      from="0 315 184"
      to="360 315 184"
      repeatCount="indefinite"
    />
  </rect>
</svg>